0

カルーセルのコンテンツがブラウザーの幅の外側にあり、画像のクロスフェードをサポートし、ページネーションが含まれていても、中央に配置され、水平スクロールバーが表示されない、ブリザードのホームページに似た jQuery カルーセルを探しています。

私は SlidesJS と carouFredSel で遊んだことがありますが、これらのカルーセルは互換性がありません。何時間もかけてテストを行った結果、これらのプラグインはコンテナーの幅が固定されていることに依存しているため、カルーセルがブラウザーの幅よりも広い場合に水平スクロール バーが表示されることが原因であることがわかりました。

同様のコード構造を使用し、CSS を介して div の背景として画像を埋め込むカルーセルがあるかどうか疑問に思っています。

<div id="carousel">
  <div class="slide">
    <div class="content">Slide01</div>
  </div>
  <div class="slide">
    <div class="content">Slide02</div>
  </div>
  <div class="slide">
    <div class="content">Slide03</div>
  </div>
</div>

.carousel {
  margin: 0 auto;
}

.slide {}

.content {
  background: url(http://www.placehold.it/1200x500 center top no-repeat;
  min-width: 960px;
  height: 500px;
}
4

1 に答える 1

0

1 つには、ブリザード スライダーはフラッシュ ベースです。これを jquery で動作させるには、jquery 関数を実行して、サイズ変更時にトリガーしてウィンドウ幅を取得する必要があります。

$(window).resize(function(){
       var w = $(window).width(); 
       $('#sliderContainer').css({width: w});
});
于 2012-09-18T22:39:01.787 に答える