web-dev-qa-db-ja.com

動的コンテンツに関する危険なスワイパーの問題

コンテンツがajaxで動的にロードされるコンテナーに危険なスワイパースクロールバープラグインを適用しています。ajax呼び出し後にプラグインを初期化します。問題は、ブラウザーのサイズを変更するまでスクロールが機能しないことです。静的コンテンツでテストしましたが、正常に動作し、ウィンドウのサイズを変更する必要はありませんが、動的コンテンツに切り替えると、スクロールが機能しなくなり、ブラウザーのサイズを変更します。

プラグインを初期化する方法は次のとおりです

var mySwiper = new Swiper('.swiper-container', {
        scrollContainer: true,
        mousewheelControl: true,
        mode: 'vertical',            
        scrollbar: {
            container: '.swiper-scrollbar',
            hide: true,
            draggable: false
        }
    });

ここにhtmlがあります

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="searchList">
                //here's the dynamic content being loaded (a list of div elements)
            </div>
        </div>
    </div>
    <div class="swiper-scrollbar">
    </div>
</div>

スワイパーコンテナーの高さは100％

javascriptswiper
17
Yasmine

私は解決策を見つけました、最初にプラグインを初期化した後に呼び出すこの関数を追加しました

function reinitSwiper(swiper) {
  setTimeout(function () {
   swiper.reInit();
  }, 500);
}

この修正は別のプラグインで言及されており、このスワイパープラグインで試したときに機能しました。 DOMに発生した変更を認識しないプラグインと関係があります。

14
Yasmine

私はノーJSソリューションを持っています。

[〜＃〜] html [〜＃〜]

<div class="responsive-swiper-holder">

  <div class="responsive-swiper-shiv"></div>

  <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>
  </div><!-- .swiper-container -->

</div><!-- .responsive-swiper-holder -->

[〜＃〜] css [〜＃〜]

.responsive-swiper-holder {
  position: relative;
}

.responsive-swiper-shiv {
  padding-top: 31.25%;
}

.swiper-container {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
}

.swiper-wrapper, .swiper-slide {
  height: 100%;
}

したがって、このメソッドは、画像のようにdivサイズをレスポンシブにするためにも機能します。幅のロックされたアスペクト比で高さをスケーリングします。

魔法は、たとえ要素の上部または下部をパディングしていても、ブラウザはマージン/パディングの％値を要素の幅のパーセンテージとして扱うことです。

お役に立てれば！

5
Tim Gardner

Swiper 3.xの修正（上記は2.xをカバーしていると思います）

function fixSwiperForIE(swiper) {
    setTimeout(function () {
        swiper.onResize();
    });
}
5
David Boyd

.reInitは機能ではなくなったため、Swiperのドキュメントの変更のために更新されました。

function reinitSwiper(swiper) {
  setTimeout(function () {
   swiper.update();
  }, 500);
}
5
Jay Lane

私は、ajaxを介して動的にロードされたコンテンツをSwiperで動作させるのにも問題があったことを付け加えました。これは、Swiperが開始されたときにコンテンツがまだロードされていなかったためです。私は自分の代わりにスワイパー独自の追加機能を使用してこれを解決しました。これはバージョン3.3.1で、setTimeout()などを使用する必要なく修正されました。

//quick and dirty creation of html to append
var imgHTML = "";
  $.each(imgArray, function (i, url) {
    imgHTML += '<div class="swiper-slide"><img src="' + url + '" alt=""/></div>';
  });

  //initiate swiper
  var mySwiper = new Swiper('.swiper-container', {
    // Optional parameters
    loop: true,
    autoHeight: true
  });

  mySwiper.appendSlide(imgHTML); //append the images
  mySwiper.update(); //update swiper so it redoes the bindings
  });

これが助けを必要としている人々の助けになることを願っています！

2
NoobishPro

スワイパー3.4.2

[〜＃〜] html [〜＃〜]

<div class="swiper-container">
    <div class="swiper-wrapper" style="height: auto">
        <div class="swiper-slide"><img src="" width="100%"></div>
        <div class="swiper-slide"><img src="" width="100%"></div>
        <div class="swiper-slide"><img src="" width="100%"></div>
        <div class="swiper-slide"><img src="" width="100%"></div>
        <div class="swiper-slide"><img src="" width="100%"></div>
    </div>
    <div class="swiper-pagination"></div>
</div>

[〜＃〜] css [〜＃〜]

.swiper-container {
    width: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    text-align: center;
    line-height: 10px;
    font-size: 12px;
    color:#000;
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}
.swiper-pagination-bullet-active {
    color:#fff;
    background: #000000;
}

javascript

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    slidesPerView: 1,
    spaceBetween: 0,
    centeredSlides: true,
    autoplay: 2500,
    autoplayDisableOnInteraction: false,
    loop: true,
    autoHeight: true
});
0
hanize