19

コンテンツが 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>

swiper-container の高さは 100%

4

9 に答える 9

6

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

function fixSwiperForIE(swiper) {
    setTimeout(function () {
        swiper.onResize();
    });
}
于 2015-04-06T19:52:22.930 に答える
5

私はノー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 サイズをレスポンシブに作成する場合にも機能します。幅のロックされた縦横比で高さをスケーリングします。

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

お役に立てれば！

于 2015-03-12T15:13:57.293 に答える
2

を介して動的にロードされたコンテンツを Swiper で動作させるのにも問題があったことを付け加えたいと思いますajax。これは明らかに、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
  });

これが困っている人の助けになることを願っています！

于 2016-09-05T15:50:59.803 に答える