[jQuery]最近はslickってスライダーが流行りらしい

一年くらい前に、デザイナーさんから「bxSlider」ってjQueryプラグインを紹介されましたが、最近はあんまり使っていないらしい。
で、最近は代わりに「slick」ってやつを使うらしい。

レスポンシブでカルーセルだとこっちのほうがいいんだとか。
ちょっとよくわかんないけど、いいんだとか。

Googleトレンドで調べてみると「slick」の圧勝、一人勝ち状態(※2016.02.16調べ)。
これだけ選ばれるんだからやっぱり便利なんでしょう。

さて、「覚えてきてね」と白羽の矢が立ったので簡単に公式サイトくらいは眺めてみますかね。

  • レスポンシブ対応!フルスクリーンレイアウトもOK!
  • ブレイクポイント毎に個別に設定できる!
  • CSS3が使える場合はそっち使う!使えなくても動くから大丈夫!
  • 好みでスワイプのON/OFFが設定できる!
  • マウスのドラッグもOK!
  • 無限ループもOK!
  • 矢印キーのボタンで使いやすさもバッチリ!
  • スライダーの追加、削除、フィルタリングにも対応!
  • 自動再生、矢印の変更、コールバックなどなど

ポイントを意訳するとこんな感じか、すげー便利じゃん、きっと。

使い方は公式サイトからDLして解凍して読み込むだけ、簡単。
jQueryだけ追加しておけば、npmとかbowerとかは使っても使わなくてもOK。
なんならCDNでもいけるっぽい。

とりあえず、スタンダードなやり方だとこんな感じ。

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
    <style type="text/css">
        .hoge {
            width: 70%;
            margin: 0 auto;
        }
        .your-class div {
            background-color: #dfdfdf;
            padding: 30px;
        }

        /* http://sublimelife.hatenablog.com/entry/2015/05/11/183344 */
        .slick-prev:before,
        .slick-next:before
        {
            font-family: 'slick';
            font-size: 20px;
            line-height: 1;

            opacity: .75;
            color: black;

            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
</head>
<body>

    <div class="hoge">
        <div class="your-class">
          <div>your content</div>
          <div>your content</div>
          <div>your content</div>
        </div>
    </div>

    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>
    <script type="text/javascript">
        $('.your-class').slick();
    </script>
</body>
</html>

一番下のメソッドコールでスライダー発動。
この辺はまぁ、jQueryのプラグインって感じ。

スライダーを発動したければjQueryに加えて、ダウンロードしたファイルにある、

  • slick.css
  • slick-theme.css
  • slick.min.js

この3つを読み込みましょう。
あと、fontsフォルダも必要なので忘れないように。
slick-theme.cssとfontsに関してはプラグインのデザイン(矢印とか)に頼らないデザイナーさんには必要ないのかも。

インラインでCSSを追加していますが、デフォルトの設定だと矢印のボタンが透明で見えなかったとです。
これには随分と時間をとられましたが、

jQueryプラグイン「slick」で矢印が出ない時の対処法 – SublimeなLife日記

こちらを参考にして無事解決、ありがとうございました。

さて、後はオプションを調べてまとめる簡単なお仕事、レベル上げ。

コメントを残す

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