SONICMOOV Googleページ

【jQuery入門 10】プラグインを使ってみよう。

【jQuery入門 10】プラグインを使ってみよう。

  • このエントリーをはてなブックマークに追加

今回はjQuery入門シリーズの10回目でございます!
前回の記事はこちら(´。‐ω‐`)

【jQuery入門 9】様々なアニメーションをつけよう。

サンプルでレスポンシブにも対応しているスライダーとカルーセル機能を併せ持った、とーーーーっても便利なプラグイン「slick」を使ってやってみます。

目次

ダウンロード

まずプラグインの公式ページからファイルをダウンロードしてきます。

ダウンロード

外部ファイル読み込み

jQuery プラグインの javascript は、jQuery のライブラリを呼び出した後に読み込むようにします!

<head>
    ...
    <link rel="stylesheet" type="text/css" href="css/slick.css"/>
    <link rel="stylesheet" type="text/css" href="css/slick-theme.css"/>
</head>
<body>
    ...
        コンテンツ
    ...
    <!-- jQuery のライブラリを呼び出した後に -->
    <script src="/js/jquery.min.js"></script>
    <!-- プラグインの javascript を呼び出す -->
    <script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="js/slick.min.js"></script>
</body>

html の準備

スライドさせたい要素は div 要素で包括します。
包括した要素をさらに div 要素で包括して、class 属性を与えます。

<div class="hoge">
    <div>スライドさせたい要素</div>
    <div>スライドさせたい要素</div>
    <div>スライドさせたい要素</div>
</div>

Javascript の準備

与えた class 属性の要素に対して、プラグインの関数を実行します。

$(document).ready(function(){
    $('.hoge').slick();
});

上記をプラグインの javascript の後で読み込むようにします。

<head>
    ...
    <link rel="stylesheet" type="text/css" href="css/slick.css"/>
    <link rel="stylesheet" type="text/css" href="css/slick-theme.css"/>
</head>
<body>
    ...
        コンテンツ
    ...
    <!-- jQuery を呼び出した後に -->
    <script src="/js/jquery.min.js"></script>
    <!-- プラグインの javascript を呼び出す -->
    <script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="js/slick.min.js"></script>
    <!-- プラグインの javascript の後で読み込む -->
    <script type="text/javascript">
    $(document).ready(function(){
        $('.hoge').slick();
    });
    </script>
</body>

カスタマイズ

プラグインの各オプションたるものをオブジェクト形式で設定します。

$('.hoge').slick({
    setting-name: setting-value
});

オプション

slick のオプションでは、スライドが切り替わる時間、自動再生するか否か、ナビゲージョンの有無など色々あります。
可能な限り、お好みにカスタマイズしちゃいましょう♪

以上で入門編が完結となります!!!!
長々とおつかれさまでした(*´Д`)

復習したい方はこちら。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

うさこ(マークアップエンジニア)

ソリューション事業部マークアップエンジニアのうさこです。入社して4年目となりました!ラーメンが大好きなのですが、脂肪という名の悪魔を極力避けるために我慢の日々を過ごしています… ぐぐぐ…

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation