概要

jQueryを使用しているサイトに「slick」でカルーセル(スライダー)を導入する方法。

個人的な要件は以下の通りです。

Tumblrの無料配布テーマ(jQuery、Google Fonts使用)にカルーセルを導入したい
スライドさせる要素を外出しにしたい（同ドメイン他ファイル）
スライドさせる要素をリンクにしたい

slickについて

slick - the last carousel you'll ever need

jQuery、Google Fontsの他に、スタイルシートとJSを読み込めば以下のコードでカルーセルを実装できるプラグインです。

$('.slick').slick();  // 子要素をスライドさせる

試したTumblrテーマについて

Craft Space | Tumblr

jQueryとGoogle Fontsを使用しているレスポンシブテーマです。
左カラムのpostの上にカルーセルを配置するものとします。

実装

プラグインの読み込み

スタイルシートの読み込み

Google Fontsを読み込んでいる箇所より後でプラグイン用CSSとテーマCSSを読み込みます。

<!-- slick -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>

プラグインJSの読み込み

jQueryを読み込んでいる箇所より後でプラグインJSを読み込みます。

<!-- JavaScript: slick -->
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>

【引っかかったポイント】

slickのドキュメントが書かれた後にjsDelivrの仕様が変わっているので、ドキュメントに記載されているCDNのURLを叩いても何も出ません。
slick-theme.cssを読み込まないとデフォルトのデザインは使えません。カスタムする場合もテーマCSSを読み込んだ後に上書きする方が時間がかからないと思います。

スライドさせる要素の実装

HTMLの記述

スライドさせる要素を記載します。今回は以下の理由で子要素を外出しにしました。

要素が多い(6ステージ * 6海域 = 36)
記述の変更がすぐ必要になりそう
同様のカルーセルをサイト内で複数使うかもしれない

/index.html

<!-- slick -->
<div class="slick"></div>

/slick/kancolle

<ul class="slick__kancolle">
  <!-- 1 /////////////////////////-->
  <li><a href="/tagged/鎮守府正面海域">1-1. 鎮守府正面海域</a></li>
  <li><a href="/tagged/南西諸島沖">1-2. 南西諸島沖</a></li>
  <li><a href="/tagged/製油所地帯沿岸">1-3. 製油所地帯沿岸</a></li>
  <li><a href="/tagged/南西諸島防衛線">1-4. 南西諸島防衛線</a></li>
  <li><a href="/tagged/鎮守府近海">1-5. 鎮守府近海</a></li>
  <li><a href="/tagged/鎮守府近海航路">1-6. 南西諸島沖</a></li>
  ...
</ul>

JavaScriptの記述

以下の順で実行するようにしました。

外部HTMLファイル読み込み
カルーセル実装

なお、HTMLファイルの読み込みは以下の理由から$.get()を使いました。

読み込むファイルの配置先が同一サイト(ドメイン)内
読み込むファイルがそれほど大きくない

ドメインを跨ぐ場合や、ファイルの読み込みにおそろしく時間がかかる場合は$.ajax()で色々する必要があると思います。

index.html

<script>
  $.get('//fromjunkyard.tumblr.com/slick/kancolle', function(sk){
    $('.slick').append(sk); // GETした内容をdiv.slick内に追加
    $('.slick__kancolle').slick({
      dots: true,　　// スライダー下部のドットを表示する
      infinite: false,  // 無限スライドさせない
      speed: 300,
      slidesToShow: 6,  // 6要素分表示
      slidesToScroll: 6  // 6要素分送り
    }); 
  });
</script>