Swiper.js in prestashop - hide other images

[Alanoitaliano96]

Hello, I'm trying to add swiper to prestashop. The swiper works but I have one small problem. Other images in slider are displayed and I want to hide them. Been searching from yesterday and can't find what I need. I'm a newbie with coding but I managed to get it work with this code:

 

<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 looks like this now:

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

So I want to hide other images on the right, is it possible?

[Oksydan]

Hi, 

since swiped 7.0 markup has been changed. Use “swiper” class instead of “swiper-container”

[Alanoitaliano96]

2 hours ago, Oksydan said:

Hi, 

since swiped 7.0 markup has been changed. Use “swiper” class instead of “swiper-container”

Thanks, working very well now. Spent a lot of time digging and checking and it was a simple error

Here is my code if someone wants to use it  added fade effect, keyboard image shifting 

Replace all content of products-image-modal.tpl in theme/templates/catalog/_partials

<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 -->

Also CSS to change arrows and pagination colors if someone wants (add in custom.css):

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content: 'next';
    color: red !important;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    content: 'prev';
    color: red !important;
}
.swiper-pagination-bullet-active {
    background: red !important;
}

Have a nice day