レスポンシブ対応の高機能スライダー「Swiper」

公開:2018年05月17日

最近よく見るようになった横に画像がスライドする広告。かっこいいなと思いながらも設置は難しいんだろうなと諦めている人に朗報です！　実は簡単に設定できるのです。必要なファイルもたったの二つ！　やってみると簡単なので早速試していきましょう。

swiperを使うために必要なソース

必要なファイルは下の２つになっています。

swiper.cssとswiper.min.jsはダウンロードして手に入れてください。テキストをクリックすると公式サイトへ移動します。

公式サイトへ行ったら、『download』→『バージョンのテキスト』（現在はv4.2.6）をクリック→Source code (zip)でダウンロードができます。zipファイルを解凍するとたくさんのファイルが入っているので『dist』のフォルダから『css』もしくは『js』へと移動し、それぞれのファイルを獲得してください。

swiperをいざ実装！

ではファイルが揃ったら、ホームページに実装していきましょう。










    

        
        ここに入れたものがスライドする

        ここに入れたものがスライドする

        ここに入れたものがスライドする

script～/scriptの部分は自分で動作をさせたいようにswiperの設定を行うことが可能です。設定は細かく行えますので、後述します。とりあえず動くように最低限のオプションを設定してあります。

Swiperは設置するファイル数も少なく、書き込む要素も少ないので簡単に実装できるのが嬉しいです。

Swiperの設定について

swiperは設定項目が膨大にあって、説明をするのも覚えるのも一苦労です。というわけでswiperの設定に関しては重要度が高いものだけを紹介していきます。


//終端まで行った際に最初にもどるか　true/false
loop: true, 

//一度に表示する個数を選択
slidesPerView: 2,

//両端のスペース
spaceBetween: 10,

//両端を半分にして擬似的に表示数を多く見せる。　true/false
centeredSlides : true,

//個数を表示しているポチッとをクリック出来るようにする。　true/false
paginationClickable : true,

//オートプレイの速度を指定ミリ秒
autoplay: 3000,

//なにか動作を行ったらオートプレイを止める。　true/false
autoplayDisableOnInteraction:false,

//どの部分が表示されているか視認できるようにする。
pagination: '.swiper-pagination',

//ネクストボタンを配置
nextButton: '.swiper-button-next',

//バックボタンを設置
prevButton: '.swiper-button-prev',
			
//レスポンシブの設定。ディスプレイのサイズで表示個数などを変えられる。
//今回の例だと600以下になったら表示個数を１つにして両端のスペースを消す。
breakpoints: {
600: {
　　　slidesPerView: 1,
　　　spaceBetween: 0
　　　}
}

この辺りを設定に入れておけば最低限まともな表示に見えるはずです。より詳細に設定したい人は専用のサイトを見に行くことをオススメします。頭が痛くなるほどたくさんのオプションがあなたを待っていますよ！

矢印の変更

矢印のスタイルは以下の部分を変更することで可能です。しかし、変更しても元々のスタイルが邪魔してうまくいかないことがあります。ベースのスタイルシートをいじっても良いのですが、それよりも『!important;』を使えば、簡単に変更することができます。

.swiper-button-prev,.swiper-button-next {
    width: 36px !important;
    height: 36px !important;
}
.swiper-button-prev {
    background-image: url("左の画像パス") !important;
    background-size: 36px 36px !important;
}
.swiper-button-next {
    background-image: url("右の画像パス") !important;
    background-size: 36px 36px !important;
}

widthとheightにあわせて、background-size:を合わせればお望みのサイズで表示出来るようになります。初期のどことなくかっこ悪い矢印を変更したい場合には、ぜひご利用ください。