Слайдер Swiper не работает, если страница не изменена

Question

Я пытаюсь добавить плагин Swiper на одну из моих страниц. То, чего я пытаюсь достичь, это интегрировать, получить здесь слайдер карусели http://idangero.us/swiper/demos/05-slides-per-view.html

HTML

 <div class="swiper-container">
    <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>

    <div class="swiper-pagination"></div>
    </div>

JS

var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 30,
        // Navigation arrows
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    });

Когда я добавляю его на скрипку, оно работает, но когда я добавляю его на страницу html, swiper не работает, пока я не открою firebug или не изменим размер страницы ( http://vidznet.com/ng1/swiper/swipe.html). Я не уверен если при инициализации конфликтует, потому что в консоли нет ошибок.

Потратив некоторое время, я подумал, что это может быть проблема с jquery, и обернул код внутри

pagebeforecreate

 $(document).on( "pagebeforecreate", "#new_",function( event ) { 

но все тот же,

Я также добавил код ниже

swiper.updateContainerSize();

который должен обновлять размер контейнера, но все еще не работает.

Любая помощь будет высоко ценится.

Answer 1

Ползунки Swiper, для правильной работы, требуют, чтобы вы:

• инициализировать их, когда они видны;
• обновлять их, когда они становятся видимыми;
• включить параметры наблюдателя.
  • observer: true;
  • observeParents: true,

Как заявили Исаихироко и создатель Swiper (по этому вопросу), выполнение одной из упомянутых тем наверняка решит вашу проблему!

Answer 2

Также я столкнулся с этой проблемой, я думаю, вам следует добавить две строки (параметры) в Java Script swipper,

var galleryThumbs = new Swiper('.gallery-thumbs', {
            observer: true,
            observeParents: true,
            loop: true,
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
        })

Где "obeserver: true" и "ObserverParents: true" - это параметры, которые влияют на правильную работу вашего swipper. Это заставит мой swipper работать правильно! Надеюсь, вы закончите!

Answer 3

Используйте этот код:

swiper.update();

Answer 4

Это решило мою проблему

1. Добавьте эти строки в свою инициализацию swiper

   observer: true, observeParents: true,

   ваша инициализация будет выглядеть так

             var swiper = new Swiper('.swiper-container', {
       pagination: '.swiper-pagination',
       slidesPerView: 3,
       observer: true,
       observeParents: true,
       paginationClickable: true,
       spaceBetween: 30,
       // Navigation arrows
   nextButton: '.swiper-button-next',
   prevButton: '.swiper-button-prev',
   });
   

2. Затем обновите свой экземпляр swiper с помощью

   swiper.update()

Answer 5

Я попробовал приведенный ниже код, он сработал для меня, мой swiper присутствовал внутри вкладки, когда мой документ загружен, swipper не работал, если и если я не изменил размер экрана, поэтому я попробовал код ниже, он работал

var swiper = new Swiper('#upcoming-appointments', {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
//<---Add this two lines in your code-->   
       observer: true,  
       observeParents: true,
    });

Answer 6

Для Angular:

Добавлять (swiper)="onSwiper($event)" на ваш swiper компонент.

<swiper (swiper)="onSwiper($event)"></swiper>

И в твоем .ts добавлять:

      onSwiper(swiper) {
  swiper.update();
}

Answer 7

У меня была аналогичная проблема, в моем случае я заменяю имя класса swiper-container с участием swiper в основном контейнере

Answer 8

Вы можете попробовать:

$(window).on({
   load: function(){
      $(this).trigger('resize');
    } 
  });

хотя это немного липкое решение.

Answer 9

У меня была аналогичная проблема,

в моем случае добавление rebuildOnUpdate: true помогло (вам также может понадобиться observer: true как уже упоминалось выше)

ps я работаю с react-id-swiper и swiper

Answer 10

Для всех, кто читает это и использует версию 6.x Swiper, вам необходимо импортировать дополнительные модули (например, навигацию, разбиение на страницы и т. Д.), Чтобы они работали.

// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';

// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);

// init Swiper:
const swiper = new Swiper(...);

Answer 11

Только добавить

автовоспроизведение: {задержка:3000,disableOnInteraction:false}

к параметрам