出典：Swiper - Most Modern Mobile Touch Slider
ブログテーマをZENO-TEALに変更しました！
こんな感じでZENO-TEALには、タイトル下にオススメ記事を表示する
カスタマイズが紹介されているのですが、
出典：カスタマイズ1：ヘッダー（タイトル下）におすすめ記事を並べて表示する - ZENO-TEAL
今回は、オススメ記事部分を変更してSwiperを使ってスライダーを実装したいと思います。
コピペだけで簡単に実装できる内容です。
Swiper
SwiperはjQuery不要のスライダーで、動作が軽く、多くのオプションが用意されているので、カスタマイズ性に優れているのがポイント。
そして、画像・動画など表示させることができます。
UNIQLOのサイトのように、コンテンツスライドを手軽に実装できるのです！
完成形
■PC版
■モバイル版
スライドに表示するコンテンツは、自分のRSSから最新記事12件分を
PC版では三枚一組のスライダーで、モバイル版だと１枚ずつスライダーを表示するようにしたいと思います。
さっそく実装をしておきます。
headに要素を追加
はてなブログでは、『css』と『js』のファイルをアップロードして使用することはできないためCDNで読み込ませます。
『設定』→『詳細設定』の『headに要素を追加』に以下を記述します。
これでSwiperを使う準備はできました。
次に実際のSwiperのコードを記述していきます。
タイトル下
『デザイン』→『カスタマイズ』→『ヘッダ』の『タイトル下』に以下を記述します。
■HTML
上記、HTMLがSwiper表示部分になります。
■JavaScript
上記、JSではSwiperの設定と自分のRSSから最新記事12件分をajaxで取得する処理を記述します。
ajaxでは、RSSから記事のタイトルと記事リンク・取得した記事内の一番最初の画像を取得して
Swiperのコンテンツを作成しています。
Swiperのオプションについては、下記サイトがわかりやすい。
デザインCSS
Swiperのコンテンツのデザインをカスタマイズするため
『デザイン』→『カスタマイズ』の『デザインCSS』に以下を記述します。
■CSS
以上で、Swiperの実装は完了です。
まとめ
スライダーを実装してみた感想としては、スマートフォンでも効率よくコンテンツを表示させるにのにとても良い機能だと思いました。
また、PV数が多い記事や関連記事を表示してみたりとアイデアをふくらませて使用できそうです。
是非、実装してみてください。
