我怎样才能有多个“刷卡器"?一页上的幻灯片 [英] How can I have multiple "Swiper" slideshows on a single page

问题描述

我正在使用滑动幻灯片.我正在使用此特定版本.这是我正在使用的确切的代码.

I'm using Swiper Slideshow. I'm using this particular version. Here's the exact code I'm using.

添加第二个刷卡器"时，分页无法正常工作.

When adding a second "Swiper", the pagination doesn't work properly.

我尝试给第二个"swiper"容器提供一个不同的类，但是没有用.

I tried giving a different class to the second "swiper" container but it didn't work.

我如何在同一页面中拥有两个??

How can I have two of this in the same page???

谢谢.

推荐答案

他们的支持向我发送了

Their support sent me this DEMO. It works!

您无需对JS文件做任何事情. 您所需要做的就是为分页添加一个额外的类，向幻灯片放映中添加一个额外的类，并在其他所有内容上区分其余的类(请参见下面的代码).这样一来，您就可以在同一页面上显示任意数量的幻灯片.

You don't need to do anything to the JS File. All you need is to add an extra class to pagination, add an extra class also to the slideshow, and differentiate the rest of the classes on everything else (see code below). With this you can have as many slishows as you want in the same page.

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

这篇关于我怎样才能有多个“刷卡器"?一页上的幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！