Swiper js append и prepend не работают с несколькими экземплярами - PullRequest
Новая
       36

Swiper js append и prepend не работают с несколькими экземплярами

0 голосов
/ 23 июня 2019

Я создал несколько каруселей для swiper на странице с кодом ниже. Все работает, кроме добавления и добавления слайда, если я удаляю код, все работает отлично 

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

Пожалуйста, помогите

1 Ответ

1 голос
/ 23 июня 2019

Вы должны получить ссылку на следующий код: 

<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 переменной.

...