Estoy tratando de agregar swiper a prestashop. El swiper funciona pero tengo un pequeño problema. Se muestran otras imágenes en el control deslizante y quiero ocultarlas. Llevo buscando desde ayer y no encuentro lo que necesito. Soy un novato con la codificación, pero logré hacerlo funcionar con este código:
<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 se ve así ahora:
https://i.ibb.co/c2D8QPx/Swiper-preview.png
Entonces quiero ocultar otras imágenes a la derecha, ¿es posible?
Encontré la solución, 'contenedor de swiper' incorrecto en swiper 7, solo debería ser 'swiper'. Trabajando muy bien ahora :)
<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 -->Publicar si alguien quiere usarlo :) efecto agregado de desvanecimiento y cambio de teclado