Sliderどうも、やん(@yan_tzn)です。ZENO-TEAL今回は、オススメ記事部分を変更してSwiperを使ってスライダーを実装したいと思います。コピペだけで簡単に実装できる内容です。目次Swiper完成形headに要素を追加タイトル下デザインCSSまとめ共有:関連スポンサーリンクSwiper出典:UNIQLO|ユニクロ公式オンラインストアSwiperはjQuery不要のスライダーで、動作が軽く、多くのオプションが用意されているので、カスタマイズ性に優れているのがポイント。画像・動画など表示させることができます。■モバイル版スライドに表示するコンテンツは、自分のRSSから最新記事12件分をPC版では三枚一組のスライダーで、モバイル版だと1枚ずつスライダーを表示するようにしたいと思います。『headに要素を追加』に以下を記述します。これでSwiperを使う準備はできました。次に実際のSwiperのコードを記述していきます。『デザイン』→『カスタマイズ』→『ヘッダ』の『タイトル下』に以下を記述します。■HTML上記、HTMLがSwiper表示部分になります。■JavaScript上記、JSではSwiperの設定と自分のRSSから最新記事12件分をajaxで取得する処理を記述します。ajaxでは、RSSから記事のタイトルと記事リンク・取得した記事内の一番最初の画像を取得してSwiperのコンテンツを作成しています。Swiperのオプションについては、下記サイトがわかりやすい。reiwinn-web.netデザインCSSSwiperのコンテンツのデザインをカスタマイズするため『デザイン』→『カスタマイズ』の『デザインCSS』に以下を記述します。■CSS以上で、Swiperの実装は完了です。まとめスライダーを実装してみた感想としては、スマートフォンでも効率よくコンテンツを表示させるにのにとても良い機能だと思いました。PV数が多い記事や関連記事を表示してみたりとアイデアをふくらませて使用できそうです。実装してみてください。Tezono個人的に学習したことを備忘録として掲載しているブログです。Azure関連やプログラミングについて書いていきます。※発言は個人の見解であり、所属する組織の公式見解ではありません。RedmineをインストールからSSL接続で外部接続するまでの手順まとめ2797。