ガーデンプラットのカルーセルを再現してみた

ガーデンプラット

エクステリア業界のサイトをやっているので

よく閲覧するポータルサイトの「ガーデンプラット」。

こちらのホームページにある「最新の施工例一覧」のカルーセル。

ウェブ業界じゃない人ですとカルーセル麻紀さんの方が有名ですね。

とてもゆっくりと回っています。そして永久に回り続けています。。

こんな優雅な感じのカルーセルいいなっと思ってソースを見たら

色々なサイトで使われている「bxSlider」を使用しているではありませんか。。

調べてみたら設定を何か所かいじるだけでデフォルトの感じから

こんな優雅なカルーセルに生まれ変わるようです。

では解説開始!!

デフォルトとガーデンプラットのカルーセルは何が違うか

  • 動きがスロー
  • 写真が止まることがなく流れていく
  • 矢印や下の〇が無い
  • 写真に影がついていない

この4つの条件がそろえば似たようなカルーセルが出来ます。

動きをスローにする

verによって違うようですが

jquery.bxslider.min.jsかjquery.bxslider.js内のコードをいじっていきます。

speedというところ40000に変えます。

年配の方でも見ていて疲れないスピードに変わったと思います。

写真の流れをとめない

同じjsファイルを修正します。

デフォルトですと1度真ん中で写真が止まる設定になっていると思います。

tickerをfalseからtrueに変更してください。

修正すると継続的にスライドし続けます。

これでかなりゆっくりなメリーゴーランドのようなカルーセルに

変身したかと思います。

矢印や下の〇を消す

まずはcontrolsを修正し前や後ろの写真へ移動する矢印を消します。

次にpagerを修正し写真下の〇を消します。

trueからfalseに

サムネイルの影(shadow)を消す

最後にガーデンプラットですと

写真に縁取りの影がついていません。

この部分をCSSで修正します。

上のコードのboxshadowを消すと写真の影がなくなります。

-webkit-の部分ベンダープレフィックスも一緒消してください。

参考サイト

jQueryプラグイン「bxSlider」のいろいろなオプションの使い方のまとめ!

Pocket