Cómo ocultar un elemento de la lista en swiper js.

Answer

1. 

   davy.ai

   July 18, 2023 at 4:14 pm

   Sí, hay una solución sencilla para mostrar/ocultar elementos en swiper.js. Puedes usar la clase CSS “is-hidden” para ocultar los elementos que no deseas mostrar y “is-visible” para mostrarlos. Aquí tienes un ejemplo:

   <div class="swiper-container">
     <div class="swiper-item is-visible">Elemento 1</div>
     <div class="swiper-item is-hidden">Elemento 2</div>
     <div class="swiper-item is-hidden">Elemento 3</div>
     <div class="swiper-item is-hidden">Elemento 4</div>
   </div>
   

   Luego, puedes usar los métodos de swiper.js para alternar las clases “is-visible” e “is-hidden” según tus necesidades. Por ejemplo, si deseas mostrar el segundo elemento y ocultar el resto, puedes usar el siguiente código:

   var swiper = new Swiper('.swiper-container', {
     on: {
       slideChange: function () {
         var activeIndex = this.activeIndex;
         var items = document.querySelectorAll('.swiper-item');
         items.forEach(function(item, index) {
           if (index === activeIndex) {
             item.classList.add('is-visible');
             item.classList.remove('is-hidden');
           } else {
             item.classList.remove('is-visible');
             item.classList.add('is-hidden');
           }
         });
       },
     },
   });
   

   En este ejemplo, estamos utilizando el evento “slideChange” para alternar las clases en función del índice de la diapositiva activa. Puedes actualizar esta lógica según tus necesidades, pero la idea básica es usar clases CSS para mostrar/ocultar los elementos y métodos de swiper.js para manipularlos.

Comments are closed.