如何在单个页面上显示多个“Swiper”幻灯片

Question

我正在使用 Swiper Slideshow 。我正在使用 这个特定版本。这是我正在使用 的确切代码。

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

我试着给第二个“swiper”容器一个不同的类，但它没有用。

我怎样才能在同一页上有两个呢？

谢谢。

原文由 David Martins 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

他们的支持给我发来了这个 DEMO 。有用！

您无需对 JS 文件执行任何操作。您只需要为分页添加一个额外的类，也为幻灯片添加一个额外的类，并在其他所有方面区分其余的类（参见下面的代码）。有了这个，您可以在同一页面中拥有任意数量的幻灯片。

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

原文由 David Martins 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 发布，翻译遵循 CC BY-SA 4.0 许可协议