カルーセルプラグイン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="カルーセル用画像０１">
            <p>カルーセルSwiperデモ1のタイトル</p>
        </li>
        <li class="swiper-slide">
            <img src="images/sample02.jpg" alt="カルーセル用画像０2">
            <p>カルーセルSwiperデモ2のタイトル</p>
        </li>
        <li class="swiper-slide">
            <img src="images/sample03.jpg" alt="カルーセル用画像０3">
            <p>カルーセルSwiperデモ3のタイトル</p>
        </li>
        <li class="swiper-slide">
            <img src="images/sample04.jpg" alt="カルーセル用画像０4">
            <p>カルーセルSwiperデモ4のタイトル</p>
        </li>
        <li class="swiper-slide">
            <img src="images/sample05.jpg" alt="カルーセル用画像０5">
            <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については以下のページで。

他の動きを確認できるデモページもありますので、お好みのものを探して実装するというのも。

今回のカルーセルデモは、スマートフォン表示の際に見やすい表示方法だと思います。スマートフォンの小さな画面で効率よくコンテンツを表示させるには、とても良い機能です。

関連記事を表示してみたり、メニュー内に最新記事の一覧を表示してみたり。色々とアイデアをふくらませて、ぜひ効果的な使い方を見つけてみてください。