11

さまざまなレスポンシブ jquery スライダーをテストした後、bxslider を使用することにしました。解決方法がわからない問題のために、私は今迷っています。bxslider (バージョン 4.1) をページの右側に配置したい

html :

<div id="about">
    <h2>My Title</h2>
    <p>...Some Text...</p>
</div>

<div id="slideshow">    
    <ul class="bxslider">
       <li><img src="img/slide_1.jpg"></li>
       <li><img src="img/slide_2.jpg"></li>
       <li><img src="img/slide_3.jpg"></li>
       <li><img src="img/slide_4.jpg"></li>
    </ul>
</div>

CSS:

#about{
    width:400px; 
    float:left;
}
#slideshow{
    max-width:500px;
    float:left;   /* IF I REMOVE THIS LINE, SLIDER IS WORKING CORRECTLY - RESPONSIVE */
}

js:

$(document).ready(function() {                  
    $('.bxslider').bxSlider({
      controls: false,
      auto: true
    }); 
});

float:left を #slideshow に追加すると、奇妙なことが起こります。すべての画像が小さな親指で読み込まれます。明らかに、bxslider には画像サイズに関する情報がありません。最初の要素について ul.bxslider の幅と高さを指定すると、機能しますが、やはり応答性はありません (スライドはスケーリングしません)

側面の問題:

#slideshow width=500px を指定すると、画像の幅が 500px になり、応答性も失われます。それが私が使用する理由です: max-width:500px.

  • ブラウザは: クロム,
  • 写真はすべて同じ形式 (500x356) の JPG です
  • 安定した jquery の最新バージョン: 10.1 bxslider の最新バージョン: 4.1
  • これらの 2 つの要素のみがフローティングしている小さなサイトでテスト済み
    (about & slideshow)
4

6 に答える 6

7

私の場合、圧縮されていないファイルを使用したときのjs「jquery.bxslider.min.js」の圧縮バージョンが原因でした。スライダーは圧縮されていないファイルに反応するので、圧縮によって何かが台無しになったに違いありません。

于 2014-06-02T07:57:55.650 に答える
0

私も問題を抱えていたのでli、スライダーのスライド要素に初期の非常に高い幅を設定して解決しました。

bxSlider は、スライドに適切な値を自動的に設定します。

li {
  width: 10000px; // inital width, bxSlider sets its own
  display: block;
}
li img {
  max-width: 100%;
}
于 2014-08-07T14:40:55.697 に答える
0

数時間前に bxslider で同様の問題が発生しましたが、解決方法がわかりません。

私の提案は、エラスティスライダーリンクを使用することです

大きな画像でも問題なく動作し、レスポンシブデザインでも問題ありません。

実装は簡単で、.css ファイルのスタイルを好きなように変更できます。

于 2013-05-29T16:39:26.677 に答える