出典:Swiper - Most Modern Mobile Touch Slider

どうも、やん(@yan_tzn)です。

ブログテーマをZENO-TEALに変更しました!

こんな感じでZENO-TEALには、タイトル下にオススメ記事を表示する
カスタマイズが紹介されているのですが、

出典:カスタマイズ1:ヘッダー(タイトル下)におすすめ記事を並べて表示する - ZENO-TEAL

今回は、オススメ記事部分を変更してSwiperを使ってスライダーを実装したいと思います。

コピペだけで簡単に実装できる内容です。

スポンサーリンク

Swiper

出典:UNIQLO|ユニクロ公式オンラインストア

SwiperはjQuery不要のスライダーで、動作が軽く、多くのオプションが用意されているので、カスタマイズ性に優れているのがポイント。
そして、画像・動画など表示させることができます。

UNIQLOのサイトのように、コンテンツスライドを手軽に実装できるのです!

Swiper Demos

スポンサーリンク

完成形

■PC版

■モバイル版

スライドに表示するコンテンツは、自分のRSSから最新記事12件分を
PC版では三枚一組のスライダーで、モバイル版だと1枚ずつスライダーを表示するようにしたいと思います。

さっそく実装をしておきます。

スポンサーリンク

headに要素を追加

はてなブログでは、『css』と『js』のファイルをアップロードして使用することはできないためCDNで読み込ませます。

『設定』→『詳細設定』の『headに要素を追加』に以下を記述します。

これでSwiperを使う準備はできました。

次に実際のSwiperのコードを記述していきます。

タイトル下

『デザイン』→『カスタマイズ』→『ヘッダ』の『タイトル下』に以下を記述します。

■HTML

上記、HTMLがSwiper表示部分になります。

■JavaScript

上記、JSではSwiperの設定と自分のRSSから最新記事12件分をajaxで取得する処理を記述します。

ajaxでは、RSSから記事のタイトルと記事リンク・取得した記事内の一番最初の画像を取得して
Swiperのコンテンツを作成しています。

Swiperのオプションについては、下記サイトがわかりやすい。

reiwinn-web.net

デザインCSS

Swiperのコンテンツのデザインをカスタマイズするため

『デザイン』→『カスタマイズ』の『デザインCSS』に以下を記述します。

■CSS

以上で、Swiperの実装は完了です。

まとめ

スライダーを実装してみた感想としては、スマートフォンでも効率よくコンテンツを表示させるにのにとても良い機能だと思いました。

また、PV数が多い記事や関連記事を表示してみたりとアイデアをふくらませて使用できそうです。

是非、実装してみてください。

スポンサーリンク

Twitterでフォローしよう

おすすめの記事