Question

我正在使用idangarus swiper。我做了一个swiper，我复制了3次。我的问题如下：当我玩（滑动）狙击手时，所有的狙击手也会移动。我希望每个助手都能独自工作。我不熟悉js所以我需要一些帮助。

js文件是：

var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
effect: 'fade'
});

html文件是：

        <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/2)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/3)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/4)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/5)"></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-white"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>

谢谢。

Answer 1

您要做的是创建三个不同的Swiper对象实例，并让每个对象在页面上引用不同的swippers。

现在通过引用与swiper的不同部分相关联的各种类（例如，分页，箭头，容器）来创建swiper对象

您需要创建自定义标识符（例如，为每个部分使用不同的ID），并创建每个swiper引用其各自的组件及其各自的ID。

基本上，你会看到这样的东西：

<div id="swiper1">// all the other divs with their respective ids</div>
<div id="swiper2">// all the other divs with their respective ids</div>
<div id="swiper3">// all the other divs with their respective ids</div>

然后当你创建swiper对象时，你会有类似的东西：

var swiper1 = new Swiper("#swiper1", {// rest of object});
var swiper2 = new Swiper("#swiper2", {// rest of object});
var swiper3 = new Swiper("#swiper3", {// rest of object});

如何在同一页面中设置少量图像游标

1 个答案: