8
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

bxsliderで画像の順番が入れ替わってしまう問題

Last updated at Posted at 2016-05-30

#はじめに
「bxSlider」便利ですよね。いつもお世話になってます。
基本的な使い方はぜひこちらのわかりやすいサイトを参考にしていただくとして。

#画像の順番が入れ替わっている!?
特定の条件が揃った時に、画像の順番が入れ替わることに気付いて焦りまくったので忘備録。ググっても特に似たような内容に引っかからなかったので、頻発するようなことではないのかも知れませんが。

この画像たち↓をシュッ!シュッ!と動くスライダーで表示します。

screencapture-file-Users-aya-Dropbox-bxslider-E8-A6-81-E7-B4-A0-E3-81-AE-E6-95-B0-E3-81-AB-E3-82-88-E3-81-A3-E3-81-A6bxSlider-E3-81-AE-E6-8C-99-E5-8B-95-E3-82-92-E5-A4-89-E6-9B-B4-E3-81-99-E3-82-8B-E8-A6-81-E7-B4-A0-html-1464629851952.jpg

ピンクが一枚目のはずなのですが、リロードすると何故かグリーンの画像から始まってしまいます。(そして2周目はちゃんとピンクから始まっている)
0zdU7ddqNA.gif

#こうなってしまう条件とは

  • mode:horizonalである
  • 親boxにdisplay:noneを指定している

大きくこの2つの条件が揃った時に画像の順番が入れ替わることがありました。(chrome,Firefox,IEで確認)

javascript
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true, //自動再生on
autoControls: true,  //自動再生on
});
$('.bxslider').fadeIn(1500);//1.5秒かけてフェードイン
});
css
.bxslider{display:none}
HTML
<div>
    <div class="contents">
        <div class="bxslider">
        <div class="bx_photo"><img src="http://placehold.it/720x480/ffb2b2/ffffff"></div>
        <div class="bx_photo"><img src="http://placehold.it/720x480/d8b2ff/ffffff"></div>
        <div class="bx_photo"><img src="http://placehold.it/720x480/b2b2ff/ffffff"></div>
        <div class="bx_photo"><img src="http://placehold.it/720x480/b2ffd8/ffffff"></div>
        </div>
    </div>
</div>

画像が一瞬光ったり縦に並んでしまう問題を解消するために、div.bxsliderdisplay:noneで非表示にしてからフェードインさせているのですが、これが原因でした。

これ、厄介なことにスライダーのオプションがmode:fadeの時は何の問題もなく表示されます。
#解決策
要は、display:noneだったりheightが設定されてなかったりスライダーを表示させるboxを認識できない時に起こる現象のようです。フェードインはこれ↓で解決しました。

javascript
$(document).ready(function(){
$('.bxslider').css({opacity:'0.01'}).animate({opacity: '1'},1500); 
//1.5秒かけて透明度を1%→100%にする
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
});
css
.bxslider
{ display: block;
  height: 420px;}

#さいごに
display:noneopacity:0このあたりは「設定された要素を無いものとして扱う」ので時々厄介なことにぶちあたったりしますね。気をつけて使っていきたいです。

8
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?