¿Cómo puedo tener varias presentaciones de diapositivas “Swiper” en una sola página?

6 minutos de lectura

Estoy usando Presentación de diapositivas Swiper. Estoy usando esta versión en particular. Aquí está el código exacto Estoy usando.

Al agregar un segundo “Swiper”, la paginación no funciona correctamente.

Intenté darle una clase diferente al segundo contenedor “swiper” pero no funcionó.

¿Cómo puedo tener dos de esto en la misma página?

Gracias.

avatar de usuario
David Martín

Su apoyo me envió esto MANIFESTACIÓN. ¡Funciona!

No necesita hacer nada con el archivo JS. Todo lo que necesita es agregar una clase adicional a la paginación, agregar una clase adicional también a la presentación de diapositivas y diferenciar el resto de las clases en todo lo demás (vea el código a continuación). Con esto puedes tener tantos slishows como quieras en la misma página.

<div class="swiper-container swiper1">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination1"></div>
    </div>

    <!-- Swiper -->
    <div class="swiper-container swiper2">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination2"></div>

 <!-- Swiper JS -->
    <script src="../dist/js/swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>
var swiper1 = new Swiper('.swiper1', {
    pagination: '.swiper-pagination1',
    paginationClickable: true,
});
var swiper2 = new Swiper('.swiper2', {
    pagination: '.swiper-pagination2',
    paginationClickable: true,
});
<script>

Tuve un caso en el que necesitaba 3 controles deslizantes idénticos en la misma página y no quería duplicar ningún código ni codificar nada. Así lo resolví 👇

// Function that actually builds the swiper 
const buildSwiperSlider = sliderElm => {
    const sliderIdentifier = sliderElm.dataset.id;
    return new Swiper(`#${sliderElm.id}`, {
        navigation: {
            nextEl: `.swiper-button-next-${sliderIdentifier}`,
            prevEl: `.swiper-button-prev-${sliderIdentifier}`
        },
        pagination: {
            el: `.swiper-pagination-${sliderIdentifier}`,
            type: 'progressbar',
        },
    });
}

// Get all of the swipers on the page
const allSliders = document.querySelectorAll('.swiper');

// Loop over all of the fetched sliders and apply Swiper on each one.
allSliders.forEach(slider => buildSwiperSlider(slider));

Como puede ver en el código anterior, la clave aquí es asignar un identificador a cada uno de los controles deslizantes. En mi caso, opté por utilizar un data-id propiedad y hacer referencia a eso. Así 👇

<div class="swiper" data-id="ID_OF_FIRST_SLIDER">
...
</div>
<div class="swiper" data-id="ID_OF_SECOND_SLIDER">
...
</div>
<div class="swiper" data-id="ID_OF_THIRD_SLIDER">
...
</div>

Y el elemento de paginación/navegación simplemente incorpora el identificador como parte de su nombre de clase.

En caso de que alguien esté pasando por aquí en busca de una solución a los conflictos con el botón anterior y siguiente entre varios swipers, esto es lo que me solucionó (proyecto Nuxt.js/SSR):

1) Agregue atributos de identificación a los divs del botón:
<div id="button-next-relacionados" class="swiper-button-next swiper-button-white"></div>
<div id="button-next-relacionados" class="swiper-button-next swiper-button-white"></div>

2) En el objeto de opciones de swiper, consulte las nuevas identificaciones en lugar de swiper-button-prev y swiper-button-next clases:

swiperOption: {
        direction: 'horizontal',
        slidesPerView: 4,
        spaceBetween: 6,
        navigation: {
          nextEl: '#button-next-relacionados',
          prevEl: '#button-prev-relacionados'
        },

Mi versión actual de Swiper es 3.4.2. Cuando hago clic en el botón siguiente-anterior, todos los controles deslizantes de la página se mueven.

Para configurar diferentes botones siguiente-anterior, hice esto:

<div class="swiper-pager">
  <div class="swiper-button-next></div>
  <div class="swiper-button-prev></div>
</div>

=>

<div class="swiper-pager">
  <div class="swiper-button-next swiper-button-next_slideshow<?=$module?>"></div>
  <div class="swiper-button-prev swiper-button-prev_slideshow<?=$module?>"></div>
</div>

Y en js:

$('#slideshow<?=$module?>').swiper({
  mode: 'horizontal',
  slidesPerView: 1,
  pagination: '.slideshow<?=$module?>',
  paginationClickable: true,
  // nextButton: '.swiper-button-next', // not work properly
  // prevButton: '.swiper-button-prev', // not work properly
  nextButton: '.swiper-button-next_slideshow<?=$module?>',
  prevButton: '.swiper-button-prev_slideshow<?=$module?>',
  spaceBetween: 30,
  autoplay: 2500,
  autoplayDisableOnInteraction: true,
  loop: true
});

@David Martins Muchas gracias, pero en la versión actual 4.5.0, debe modificar un poco el código js:

<script type="text/javascript">
// Init Swiper
var swiper1 = new Swiper('.swiper1', {
  pagination: {
    el: '.swiper-pagination1',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // Enable debugger
  debugger: true,
});
var swiper2 = new Swiper('.swiper2', {
  autoHeight: true,
  pagination:  {
    el: '.swiper-pagination2',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // Enable debugger
  debugger: true,
});

de todos modos, muchas gracias por la ayuda!

avatar de usuario
koby douek

  1. agregar otra clase como:

    class="swiper-container two" ... 
    
  2. agregue la clase en js como:

    new Swiper('.swiper-container.two', { ...
    

Así es como funcionó para mí

Aquí hay un buen fácil Vainilla Javascript forma de hacerlo

simplemente cambie la clase ‘deslizador grande’ a lo que esté usando como nombre de su control deslizante, lo mismo con las clases anterior y siguiente para las flechas.

ejemplo completo aquí en codepen

https://codepen.io/davenoham/pen/YzQWdge

const largeSlider = ()=>{
let largeSliders = document.querySelectorAll('.large-swiper')
let prevArrow = document.querySelectorAll('.prev')
let nextArrow = document.querySelectorAll('.next')
largeSliders.forEach((slider, index)=>{
    let sliderLength = slider.children[0].children.length
    let result = (sliderLength > 1) ? true : false
    const swiper = new Swiper(slider, {
        direction: 'horizontal',
        loop: result,
        navigation: {
            nextEl: nextArrow[index],
            prevEl: prevArrow[index],
        },
        speed: 1000,
    }); 
})

} ventana.addEventListener(‘cargar’, deslizador grande)

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad