prestashop 中的 Swiper.js - 隐藏其他图像答案

【问题标题】：Swiper.js in prestashop - hide other imagesprestashop 中的 Swiper.js - 隐藏其他图像
【发布时间】：2021-09-24 14:52:23
【问题描述】：

我正在尝试将 swiper 添加到 prestashop。刷卡器有效，但我有一个小问题。显示滑块中的其他图像，我想隐藏它们。从昨天开始搜索，找不到我需要的东西。我是一个编码新手，但我设法让它与这个代码一起工作：

<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

<div class="modal fade js-product-images-modal" id="product-modal">
  <div class="modal-dialog" role="document">
    <div class="swiper-container " style="width:100%">
      <div class="swiper-wrapper">
        {foreach from=$product.images item=image}
        <div class="swiper-slide">
          <div class="swiper-zoom-container">
            <img src="{$image.bySize.large_default.url}" alt="{$image.legend}" style="width:100%;" title="{$image.legend}" itemprop="image">
          </div>
        </div>
        {/foreach}
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
      <!-- Add Arrows -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>  

<script>
    var swiper = new Swiper(".swiper-container", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {
        el: ".swiper-pagination",
    },
    });
</script>

Swiper 现在看起来像这样：

https://i.ibb.co/c2D8QPx/Swiper-preview.png

所以我想隐藏右边的其他图片，可以吗？

【问题讨论】：

请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： javascript image prestashop swiper

【解决方案1】：

找到了解决方案，swiper 7 中的错误“swiper-container”应该只是“swiper”。现在工作得很好:)

<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

<div class="modal fade js-product-images-modal" id="product-modal">
  <div class="modal-dialog" role="document">
    <div class="swiper" style="width:100%">
      <div class="swiper-wrapper">
        {foreach from=$product.images item=image}
        <div class="swiper-slide">
           <img src="{$image.bySize.large_default.url}" alt="{$image.legend}" style="width:100%;" title="{$image.legend}" itemprop="image">
        </div>
        {/foreach}
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>  
<script>
    var swiper = new Swiper(".swiper", {
    spaceBetween: 30,
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    keyboard: true,
    effect: "fade",
    });
</script>
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

如果有人想使用它，请发布 :) 添加效果淡入淡出和键盘移动

【讨论】：