Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

153
Views
Swiper.js en prestashop - ocultar otras imágenes

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?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!