カルーセル表示でおすすめスライダープラグインのSwiper は、jQueryに依存することなく実装できます。さまざまな表示形式がありますが、今回はFacebookのような横スライド表示を実装する方法についてご紹介。モバイルの関連記事の一覧表示をこのプラグインで表示してみてはいかがでしょうか。
カルーセルプラグインSwiperのサンプルデモ
今回実装するのはこちら。
スマートフォンの場合は横にスワイプして、PCの場合は画像をクリックしながら横にスライドしてみてください。コンテンツがスルスルと横にスライドする動きを確認することができると思います。
カルーセルプラグインSwiperを実装する
Swiperを実装するには、まずサイトからファイルをダウンロードしてきます。
そして、『dist』→『css』と『js』フォルダ内の以下のファイルを任意の場所にアップロードします。
- swiper.min.css
- swiper.min.js
HTMLタグを設置したい場所に貼り付けます。
<link rel="stylesheet" href="css/swiper.min.css">
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<img src="images/sample01.jpg" alt="カルーセル用画像01">
<p>カルーセルSwiperデモ1のタイトル</p>
</li>
<li class="swiper-slide">
<img src="images/sample02.jpg" alt="カルーセル用画像02">
<p>カルーセルSwiperデモ2のタイトル</p>
</li>
<li class="swiper-slide">
<img src="images/sample03.jpg" alt="カルーセル用画像03">
<p>カルーセルSwiperデモ3のタイトル</p>
</li>
<li class="swiper-slide">
<img src="images/sample04.jpg" alt="カルーセル用画像04">
<p>カルーセルSwiperデモ4のタイトル</p>
</li>
<li class="swiper-slide">
<img src="images/sample05.jpg" alt="カルーセル用画像05">
<p>カルーセルSwiperデモ5のタイトル</p>
</li>
</ul>
</div>
<script src="js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1.4,
spaceBetween: 10,
freeMode: true
});
</script>
CSSも貼り付けます。
li.swiper-slide a {
display: block;
padding: 1em;
border: 1px solid #dcdcdc;
}
li.swiper-slide img {
display: block;
margin: 0 0 .2em;
width: 100%;
height: auto;
}
li.swiper-slide p {
font-size: 1.2rem;
text-align: center;
}
※サイトに合わせてスタイリングしてみてください。
以上です。
jQueryに依存していないため、ダウンロードしたファイルのみで実装可能です。
色々な動きを設定できるAPIがありますので、var swiper内に追記してみてください。APIについては以下のページで。
他の動きを確認できるデモページもありますので、お好みのものを探して実装するというのも。
今回のカルーセルデモは、スマートフォン表示の際に見やすい表示方法だと思います。スマートフォンの小さな画面で効率よくコンテンツを表示させるには、とても良い機能です。
関連記事を表示してみたり、メニュー内に最新記事の一覧を表示してみたり。色々とアイデアをふくらませて、ぜひ効果的な使い方を見つけてみてください。