web-dev-qa-db-ja.com

ページのサイズを変更しないと、スワイパースライダーが機能しない

Swiper プラグインを自分のページの1つに追加しようとしています。私が達成しようとしているのは、ここにカルーサルスライダーを統合することです 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ページに追加すると、Firebugを開くかページのサイズを変更するまでスワイパーは機能しません（ http://vidznet.com/ng1/swiper/swipe.html ）コンソールにエラーがないため、初期化時に競合するかどうかわかりません。

時間をかけた後、私はそれがjqueryの問題かもしれないと思い、コーディングを

作成前のページ

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

それでも同じです

以下のコードも追加しました

swiper.updateContainerSize();

コンテナサイズを更新することになっていますが、まだ機能しません。

どんな助けでも大歓迎です。

javascriptjqueryswiper
7
LiveEn

スワイパーのスライダーを正しく機能させるには、次のいずれかを行う必要があります。

  • 表示されたら初期化します。
  • 表示されたら更新します。
  • オブザーバーパラメータを有効にします。
    • observer: true;
    • observeParents: true。

IsaiahirokoとSwiperの作成者が述べたように（ this issue ）、前述のトピックのいずれかを実行すると問題が解決します。

8
user6794421

このコードを使用してください：

swiper.update();
3
Nechemya Kanelsky

あなたは試すことができます：

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

それは少し粘着テープの解決策ですが。

1
Sam0

以下のコードを試してみましたが、スワイパーがタブ内にあり、ドキュメントが読み込まれていると、画面のサイズを変更しない限り、スワイパーが機能しなかったため、以下のコードを試してみました

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,
    });
0
Omkar Nevase

また、私はこの問題に直面していました、Java Script of 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」は、スウィッパーが適切に機能するようにするためのパラメーターです。これにより、私のスワイパーが正しく動作します。あなたが成し遂げることを願っています！

0
Adarsh Bhalani