javascript - 如何在单个页面上显示多个 "Swiper"幻灯片

Question

我正在使用 Swiper Slideshow .我正在使用 this particular version .这是 the exact code我正在使用。

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

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

我怎样才能在同一个页面中有两个这样的东西？

谢谢。

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>