Блог

Главная - Вопросы по программированию - Swiper.js в prestashop — скрыть другие изображения

Swiper.js в prestashop — скрыть другие изображения

#javascript #image #prestashop #swiper

Вопрос:

Я пытаюсь добавить 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>

Свайпер сейчас выглядит так:

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

Поэтому я хочу скрыть другие изображения справа, возможно ли это?

Комментарии:

1. Пожалуйста, проясните вашу конкретную проблему или предоставьте дополнительные сведения, чтобы точно указать, что вам нужно. Поскольку это написано в настоящее время, трудно точно сказать, о чем вы просите.

Ответ №1:

Нашел решение, неправильный «swiper-контейнер» в swiper 7, это должен быть просто «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 -->

Публикация, если кто-то хочет ее использовать 🙂 добавлен эффект затухания и переключения клавиатуры

Метки: