Question

我使用以下代码在页面上创建了多个滑动轮播。如果删除代码，一切正常，但添加和前置幻灯片除外，一切正常

 $('.swiper-container').each(function() {
    var cggoSwiper = new Swiper( $(this) , {
      //swiper paramenters here 
    });
      cggoSwiper.appendSlide(cggowlContentAfterSlider);
      cggoSwiper.prependSlide(cggowlContentBeforeSlider);
    });

请帮助

Answer 1

您应该从以下代码中获取参考：

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


<!-- Initialize Swiper -->
<script>
var swiper1 = new Swiper('.swiper1', {
    pagination: '.swiper-pagination1',
    paginationClickable: true,
});

swiper1.appendSlide('<div class="swiper-slide">Slide 11</div>');
swiper1.prependSlide('<div class="swiper-slide">Slide 0</div>');

var swiper2 = new Swiper('.swiper2', {
    pagination: '.swiper-pagination2',
    paginationClickable: true,
});

swiper2.appendSlide('<div class="swiper-slide">Slide 11</div>');
swiper2.prependSlide('<div class="swiper-slide">Slide 0</div>');
<script>

您应该为每个Swiper变量指定唯一的引用。

Swiper JS追加和前置不适用于多个实例

1 个答案: