如何在单个页面上拥有多个Swiper幻灯片展示？

Question

我正在使用Swiper幻灯片。我在使用这个特定版本。这里是我正在使用的确切代码。

当添加第二个Swiper时，分页无法正常工作。

我尝试为第二个Swiper容器提供不同的类，但它没有起作用。

我该怎么在同一页上有两个Swiper？

谢谢。

- David Martins

---

这里的错误代码链接正是为什么代码需要放在问题中的原因。 - isherwood

Answer 1

他们的支持给我发送了这个演示。它有效！

不需要对JS文件做任何操作。 你只需为分页添加一个额外的类，为幻灯片添加一个额外的类，并在其他所有类上区分剩余的部分（参见下面的代码）。有了这些，你可以在同一页上拥有任意数量的幻灯片。

<!-- Swiper -->
<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>
</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>

- David Martins

Answer 2

我曾遇到这样一个案例，需要在同一个页面上使用3个相同的轮播组件，但我不想复制任何代码，也不想硬编码。以下是我的解决方法

// 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));

从上面的代码中可以看出，关键在于为每个滑块分配一个标识符。在我的情况下，我选择使用 data-id 属性并引用它。像这样：

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

分页/导航元素只需将标识符作为其类名的一部分即可。

- user2831723

Answer 3

如果有人在搜索解决多个swiper（幻灯片）之间的prev和next按钮冲突的解决方案，这就是我解决它的方法（Nuxt.js / SSR项目）：

1）将id属性添加到按钮的div中： <div id="button-prev-relacionados" class="swiper-button-prev swiper-button-white"></div> <div id="button-next-relacionados" class="swiper-button-next swiper-button-white"></div> 2）在swiper选项对象中，引用新的id代替swiper-button-prev和swiper-button-next类：

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

- ramigs

Answer 4

我的当前 Swiper 版本是 3.4.2。当我点击下一个/上一个按钮时，页面上的所有滑动器都会移动。

为了设置不同的下一个/上一个按钮，我已经完成以下步骤：

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

And in 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
});

- SergeTkach

---

嗨，当我们单击箭头或圆点时，一切都保持同步，这很完美。只是想问一下，是否也可以使用触摸滑动实现？ - Shashank Bhatt

Answer 5

1. add another class like:

   class="swiper-container two" ... 
   

2. append the class in js like:

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

这是我的操作步骤：

- O'talb

Answer 6

这里有一个非常简单的纯JavaScript方法来实现它。只需将“large-slider”类更改为您用作滑块名称的内容，箭头的上一个和下一个类也是如此。完整示例在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,
    }); 
})

当窗口加载时，调用largeSlider函数。

- Mr.No

---

嘿嘿！太棒了，你的解决方案很好，但是你在堆栈中的代码包装有点问题，不过你的CodePen完美无缺！...并且为了补充@Mr.No的优秀解决方案，如果您还需要分页，可以使用以下代码：... 更多代码 ... pagination: { el: pag[index], type: "bullets", clickable: true, },``` - samuelkobe

Answer 7

var i=1;
var str1='sliderBox_'
var str2='.sliderBox_';
$('.swiper-container').each(function (index,value) {

    var classAdd = str1 + i;
    var classCall = str2 + i;
    var next_slider = 'slider-next' + i;
    var prev_slider = 'slider-prev' + i;
    $(this).addClass(classAdd);
    $(this).parent().siblings(".sites-slider__prev").addClass(prev_slider);
    $(this).parent().siblings(".sites-slider__next").addClass(next_slider);
    new Swiper(classCall,{
        slidesPerView: 4,
        spaceBetween: 20,
        loop: true,
        navigation: {
            nextEl: ('.' + next_slider),
            prevEl: ('.' + prev_slider),
        },
        breakpoints: {
            1199: {
                slidesPerView: 3,
            },
            991: {
                slidesPerView: 2,
            },
            600: {
                slidesPerView: 1,
            },
        }
    });
    i++;



});

- Ahmed Matri

---

有效的解决方案，因为它避免了在滑块相同的情况下不必要地重复代码。 - Sébastien Gicquel

Answer 8

@David Martins 非常感谢，但在当前版本4.5.0中，您需要修改一些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,
});

无论如何，非常感谢您的帮助！

最初的回答

- illia chill

Answer 9

我查看了这里的所有答案，但它们都有不必要的代码。 new Swiper() 构造函数的第一个参数可以是 DOM 元素，因此我们可以像下面一样实现它。使用这种方法，我们可以避免重复的代码，而且无需使用任何额外的 ID 或类名。

HTML

<div class="swiper-container">
    <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>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<div class="swiper-container">
    <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>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

JavaScript

const sliders = document.getElementsByClassName('swiper-container');
for (let slide of sliders) {
    const nextEl = slide.getElementsByClassName('swiper-button-next')[0]
    const prevEl = slide.getElementsByClassName('swiper-button-prev')[0]
    let carousel = new Swiper(slide, {
        navigation: {
            nextEl,
            prevEl,
        },
    });
}

- Intelligent Web Solution

Answer 10

这个问题有一个简单的解决方案。您可以通过启用{createElements: true}来动态创建导航。它将动态生成导航，您还需要启用导航以将导航添加到dom中。否则什么也不会发生。

new Swiper('.color-carousel', {
    slidesPerView: 8,
    spaceBetween: 8,
    loop: true,
    modules: [Navigation],
    navigation: true,
    createElements: true,
  });

这里是官方文档 https://swiperjs.com/swiper-api#param-createElements

- Ferdous Hassan