初心者webデザイナー・コーダーのための備忘録|Tech Stock 【テックストック】

【bxslider】最後のスライドが最初に表示されるバグの対処法

> JavaScript

こんにちは。

今回はbxSliderのお話です。

スライダーのjsといえば

  • bxSlider
  • slick
  • Swiper

などなどありますね。

実は、私が毎回使っているのはbxSliderです。

理由は最後におまけとしてお話ししますね。

(おまけ程度の話なので利便性がどうとかの話ではないです。期待しないでください^^;)

bxSliderといえば、数年前にレスポンシブ対応が実装されて非常に使いやすくなりましたね!

ただ、しかし、いろんな場面でbxSliderを使ってきた方はご存知かもしれませんが、bxSliderにはいくつかバグが存在します。

この前、bxSliderを使って画面いっぱいいっぱいのスライダーを作っていた時にぶち当たったバグが、
最後のスライドが最初に表示されてしまう
というバグです。

画面いっぱいいっぱいのスライダー、通称「フルワイドスライダー」を作るときには毎回このバグに直面するだろうと思い、解決策を探しました。

ネット上にはなかなか情報が無く、偶然、解決方法が見つかったので備忘録がてら、世界のwebエンジニアのためにここに記しておきます。

ぜひ役に立ててください!

いきなり対処法!

では早速対処法を紹介します。

バグが起きてしまう条件は、bxSliderのオプションの

minSlides

maxSlides

の設定が、以下のようになっているときにバグが発生します。

$(function(){
	$('#sample').bxSlider({
		minSlides: 1,
		maxSlides: 1,
	});
});


これを、

$(function(){
	$('#mainvisual ul#mainvisual_bxslider').bxSlider({
		minSlides: 1,
		maxSlides: 2,
	});
});

にするとバグが解消されます。

要するに、
「minSlides」<「maxSlides」
の数を設定しなくてはいけない、ということです。

まとめ

駆け出しのwebエンジニアの方は「スライダーを作れ」と言われてもどのプラグインを使ったらよいか、というところでもすでにつまずいてしまいますよね。

その上、選んだjsプラグインがバグでおかしな挙動をしだすと生きている心地がしなくなります(汗)

そんな駆け出しwebエンジニアの方にも役に立てていたら嬉しいです。

bxSliderを使って最後のスライドが最初に表示されてしまうバグが起きてしまったらぜひ今回お話しした対処法で乗り切ってください!

おまけ

さてさて、少しおまけです。

はじめにいくつかスライダーjsのプラグインを紹介しましたが、Swiperなんかはちょっとリッチな動きが実装できるんですよね!

「Life is Good」のLIG.incさんの公式ホームページのメインビジュアルのスライダーはSwiperが使われているようです。

「LIGさんのサイトみたいにしたい!」という要望に答えた時にjsでこのようなスライダーを作りました。

LIGさんはjsでカスタマイズされているようだったので、すぐにはこんな動きにはできなかったですがヌルヌル動くと気持ちいですよね!

https://liginc.co.jp/


そうそう、それから、私がbxSliderを使うようになったきっかけなんですが、早い話がslickのトラウマです(笑)

当時新卒で入社した会社で、すでに出来上がっているサイトにスライダーを追加実装することになり、私が担当することになりました。

そのときに選んだjsプラグインが「slick」スライダーだったんです。

いざ実装してみたら、すでに実装していたハンバーガーメニューがバグってしまいました!!!

上司には怒られ、納期が近いとプレッシャーをかけられ、当時駆け出しの私にはトラウマにしかならなかったです。。。。

結局別のjsプラグインである「bxSlider」を使って、無事納期にも間に合った、、、という思い出です。

それ以来、スライダーといえばbxSlider、というのが私のスタイルです。

今となってはどのスライダーでも使えるようになりましたのでこのトラウマも良き思いでですね^^

という誰得・・・( ^ω^)・・・

関連記事

【Javascript】スクロールで要素を表示させる方法
物事を継続させることが成功の「最初の一歩」であり、「最大の一歩」。 どうも、 ジャバスクリプトを勉強中の管理人です。 私はweb制作の仕事を
【jQuery】クリッカブルマップをレスポンシブ対応させるjs「jQuery RWD Image Maps」の使い方
クリッカブルマップでマークアップしたいとき、レスポンシブ対応させることができないかと思い調べたら余裕で見つかった。   しかも、要
【bxsliderをif文の条件分岐で実行】要素の数によってスライダーを実装するかどうかを切り替える
こんにちは、管理人です。 今回は、要素の数によってbxslider(ボックススライダー)のスライダーを実行するか否かをJavaScriptで
【Javascript】ジャバスクリプトの基本文法【初心者向け】
web制作の現場で昨今非常によく使われているJavascript。 jQueryという非常に便利なツールが登場し、今ではjavascript



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です