エクステリア業界のサイトをやっているので
よく閲覧するポータルサイトの「ガーデンプラット」。
こちらのホームページにある「最新の施工例一覧」のカルーセル。
ウェブ業界じゃない人ですとカルーセル麻紀さんの方が有名ですね。
とてもゆっくりと回っています。そして永久に回り続けています。。
こんな優雅な感じのカルーセルいいなっと思ってソースを見たら
色々なサイトで使われている「bxSlider」を使用しているではありませんか。。
調べてみたら設定を何か所かいじるだけでデフォルトの感じから
こんな優雅なカルーセルに生まれ変わるようです。
では解説開始！！
bxSliderのカスタマイズ
デフォルトとガーデンプラットのカルーセルは何が違うか
- 動きがスロー
- 写真が止まることがなく流れていく
- 矢印や下の〇が無い
- 写真に影がついていない
この４つの条件がそろえば似たようなカルーセルが出来ます。
動きをスローにする
verによって違うようですが
jquery.bxslider.min.jsかjquery.bxslider.js内のコードをいじっていきます。
speedというところ40000に変えます。
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ speed: 40000 }); }); </script> |
年配の方でも見ていて疲れないスピードに変わったと思います。
写真の流れをとめない
同じjsファイルを修正します。
デフォルトですと1度真ん中で写真が止まる設定になっていると思います。
tickerをfalseからtrueに変更してください。
修正すると継続的にスライドし続けます。
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ ticker: true }); }); </script> |
これでかなりゆっくりなメリーゴーランドのようなカルーセルに
変身したかと思います。
矢印や下の〇を消す
まずはcontrolsを修正し前や後ろの写真へ移動する矢印を消します。
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ controls: false }); }); </script> |
次にpagerを修正し写真下の〇を消します。
trueからfalseに
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $('.bxslider').bxSlider({ pager: false }); }); </script> |
サムネイルの影（shadow）を消す
最後にガーデンプラットですと
写真に縁取りの影がついていません。
この部分をCSSで修正します。
|
1 2 3 4 5 6 |
.bx-wrapper { -webkit-box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc; border: 5px solid #fff; background: #fff; } |
上のコードのboxshadowを消すと写真の影がなくなります。
-webkit-の部分ベンダープレフィックスも一緒消してください。
参考サイト
・jQueryプラグイン「bxSlider」のいろいろなオプションの使い方のまとめ！
