Categories
SugiBlog ホームページ制作・システム開発

jQuery スライドショー slick.js

レスポンシブに対応した多機能プラグイン「slick.js」のご紹介です。

slick.js

http://kenwheeler.github.io/slick/

個人的には、思ったようにしようとすると少しコツがいるな、という感じでした。

まずはjQueryとslick.js本体を読み込みます。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="slick-1.5.7/slick/slick.min.js"></script>

次にCSSを読み込み

<link rel="stylesheet" type="text/css" href="slick-1.5.7/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-1.5.7/slick/slick-theme.css"/>

スライドさせたい画像等のコンテンツをbodyタグ内に記述します。

<ul class="your-class">
    <li>
        コンテンツ1
    </li>
    <li>
        コンテンツ2
    </li>
</ul>


最後にスライドショーを実行するスクリプトを記述します。

<script type="text/javascript">
<!--//
$(document).ready(function(){
    $('.your-class').slick();
});
//-->
</script>

slick.jsにはカルーセルで欲しい機能がほぼオプションで指定できます。
詳しくは公式ページをご覧ください。

オプションを指定して実行

$('.your-class').slick({
    autoplay: true,      //オートプレイ
    autoplaySpeed: 2000, //オートプレイの速度(ms)
    arrows: true,        //矢印の表示
    cssEase: "ease-out", //アニメーションの設定(ease,linear,ease-in,ease-out,ease-in-out)
    dots: true,          //ドットナビゲーションの表示
    infinite: true,      //無限ループ
    slidesToScroll: 1,   //スライド単位
    slidesToShow: 1,     //一度に見せるスライドの数
});

デフォルトの設定で実行させるにはこれだけで十分ですが、このままだと表示領域が画面一杯だったり、Prev/Nextの矢印表示を設定しても白背景だと見えない等の問題があります。
そのため、少しカスタマイズが必要な点もあるのではないでしょうか。

カスタマイズ

まず、リストスタイルを初期化します。

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

通常、幅が画面一杯になるので調整します。

.your-class {
    width: 350px;
    margin: 0 20px;
}

Prev/Nextの矢印がデフォルト白なので変更します。

.slick-prev:before, .slick-next:before {
    color: #666;
}

その他、ナビゲーションのドット表示位置を調整したいとき

.slick-dots {
    bottom: -30px;
}

ドットの色を変更したいとき

.slick-dots li button:before {
    color: #0000ff;
}

ドットがアクティブの状態の色を変更したいとき

.slick-dots li.slick-active button:before {
    color: #ff6347;
}

最後に注意点ですが、slick-theme.cssはなるべくテキストエディタでは開かないようにしましょう。
メモ帳なら大丈夫なようですが、私が使っているテキストエディタで一度開くと、ナビゲーションのドットが文字化けしてしまいました。

9,731 views

コメントを残す

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

*