jQueryプラグイン「bxslider」を利用してサムネイル付スライダーをつくる

サムネイル付のスライダーを実装してほしいと頼まれ、いつも通り解決方法をGoogle先生に尋ねたのですが、最終的に「bxslider」というプラグインで実装することができたので、備忘録として残しておこうと思います。

必要なライブラリを読み込みます。

設定をjquery.bxslider.ini.jsに書いて外部ファイル化しています。

CSSはスライダーの画像が表示されているとき、サムネイルには「active」というクラスがあたるので、active以外の時は画像を透明度50%で表示させるようにしています。

スライダー部

サンプルはこちら

投稿日
カテゴリ