web-dev-qa-db-ja.com

スライドがフロート要素内にラップされている場合、bxsliderが応答しません

さまざまなレスポンシブ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の幅と高さを指定すると、機能しますが、応答性はありません（スライドはスケーリングされません）

副次的な問題：

私の画像の幅は500pxですが、＃slideshow width = 500pxを指定すると、応答性も失われます。それが私が使用する理由です：max-width：500px。

  • ブラウザは：chrome、
  • 写真はすべて同じ形式（500x356）JPGです
  • 安定したjqueryの最新バージョン：10.1 bxsliderの最新バージョン：4.1
  • これらの2つの要素のみがフローティングで作成された小さなサイトでテスト済み
    （概要とスライドショー）
jquerycssbxslider
11
PathOfNeo

私は同じ問題を抱えていましたが、サイズ/ビューポートなどに関係なく、応答的に何もしませんでした。

私はbxSliderが好きなので、しばらくの間ソースを探し回って、それがcssの問題であることがわかりました。追加する必要があります。

.bx-wrapper img{
    display:block;
    max-width: 100%;
}

そしてそれは私のために働いた。これで問題が解決したことを願っています。

注意：これは別のバージョンで修正される可能性があります。

9
m33bo

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

7
ckhawand

他のスライダープラグインで見られるのと同じ問題があり、float要素内にラップされると応答性が失われます。私の場合、解決策は次のように追加することでした。

@media screen and (max-width: 600px) {
    #slideshow {
        float:none;
    }
}

したがって、最初は、スタイルのどこかでスライドを含む要素をフロートしましたが、ビューポートが600ピクセル未満の場合は、スライダーを右側に維持する必要はありません（幅が狭いため）。フロートを削除して、再び応答性。

3
PathOfNeo

[〜＃〜] css [〜＃〜]：

.bx-wrapper img {
 display:block;
 max-width: 100%;
 height:auto;
}
1
Sebin Simon

私は数時間前にbxsliderで同様の問題を抱えていましたが、解決方法がわかりません。

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

大きな画像でもレスポンシブデザインに問題はありません。

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

0
user2232273

私にも問題があり、スライダーのスライドli要素に最初の非常に高い幅を設定することで問題を解決しました。

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

li {
  width: 10000px; // inital width, bxSlider sets its own
  display: block;
}
li img {
  max-width: 100%;
}
0
MonkeyVoodoo