JavaScriptライブラリのスライダー、swiper.jsの使い方です。レスポンシブ及びタッチデバイスのスワイプにも対応しています。jQuery不要で動作しますがjQueryでの記述も可能です。CDNも提供されています。
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>今回はダウンロードしたファイルを使用します。バージョンは5.4.5です。バージョン5.0からIE11はサポート外です。
■ swiper01：オプション指定なし
swiperの動作に必須のhtml構造です。外側のdivタグから以下のクラス名を付与します。
・swiper-container
・swiper-wrapper
・swiper-slide
<p class="title">swiper01：オプション指定なし</p>
<div class="swiper-container swiper01">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/swiper01.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper02.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper03.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper04.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper05.jpg" alt=""></div>
</div>
</div>JavaScriptのコードです。オプションを指定せずデフォルトの設定で起動します。ページネーション・ナビゲーションボタン・スクロールバーを実装していないため、PCではドラッグ・SPではスワイプでのみ動作します。また、自動再生なし・ループなし・表示スライド1の設定になります。
var swiper01 = new Swiper('.swiper01', {});■ swiper02：ページネーション・ナビゲーションボタン・スクロールバー
ページネーション・ナビゲーションボタン・スクロールバーを表示します。空のdivタグに以下のクラス名を付与します。
・swiper-pagination //ページネーション
・swiper-button-prev //前へボタン
・swiper-button-next //次へボタン
・swiper-scrollbar //スクロールバー
<p class="title">swiper02：ページネーション・ナビゲーションボタン・スクロールバー</p>
<div class="swiper-container swiper02">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/swiper01.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper02.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper03.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper04.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper05.jpg" alt=""></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>オプションでページネーション・ナビゲーションボタン・スクロールバー各要素のクラス名を指定します。デフォルトでページネーションはtype: 'bullets'、clickable: falseになります。clickable: trueを指定するとページネーションをクリックして対応スライドを表示できます。またスクロールバーにdraggable: trueを指定するとスクロールバーをドラッグしてスライド操作ができます。
var swiper02 = new Swiper('.swiper02', {
//ページネーション
pagination: {
el: '.swiper-pagination',
type: 'bullets', //初期値
clickable: true,
},
//ナビゲーションボタン（次へ・前へボタン）
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//スクロールバー
scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
}
});■ swiper03：allowTouchMove: false
ページネーション・ナビゲーションボタンを表示します。スライド操作はこの2つのみに限定します。
<p class="title">swiper03：allowTouchMove: false</p>
<div class="swiper-container swiper03">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/swiper01.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper02.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper03.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper04.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper05.jpg" alt=""></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>オプションでallowTouchMove: falseを指定すると、PCでドラッグ・SPでスワイプの動作を停止できます。
var swiper03 = new Swiper('.swiper03', {
allowTouchMove: false,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});■ swiper04：pagination: {type: 'fraction'},slidesPerView: 3
ページネーション・ナビゲーションボタンを表示して、ページネーションのtypeを'fraction'に変更します。また、ループあり・表示スライド3の設定にします。
<p class="title">swiper04：pagination: {type: 'fraction'},slidesPerView: 3</p>
<div class="swiper-container swiper04">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/swiper01.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper02.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper03.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper04.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper05.jpg" alt=""></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>オプションでpagination: {type: 'fraction'}、loop: true、slidesPerView: 3を指定します。表示スライドが複数ある場合、最初のアクティブなスライドは一番左に表示されます。
var swiper04 = new Swiper('.swiper04', {
loop: true,
slidesPerView: 3,
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});■ swiper05：pagination: {type: 'progressbar'},slidesPerView: 2,centeredSlides: true
ページネーション・ナビゲーションボタンを表示して、ページネーションのtypeを'progressbar'に変更します。また、ループあり・表示スライド2・アクティブなスライドを中央配置の設定にします。
<div class="swiper-container swiper05">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/swiper01.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper02.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper03.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper04.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper05.jpg" alt=""></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>オプションでpagination: {type: 'progressbar'}、loop: true、slidesPerView: 2、centeredSlides: trueを指定します。slidesPerViewが2でcenteredSlides: trueが指定されているため、アクティブなスライドは中央、アクティブではないスライドは左右に半分ずつ表示されます。
var swiper05 = new Swiper('.swiper05', {
loop: true,
slidesPerView: 2,
centeredSlides: true,
pagination: {
el: '.swiper-pagination',
type: 'progressbar',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});■ swiper06：slidesPerView: 3,spaceBetween: 10
ページネーション・ナビゲーションボタンを表示します。また、ループあり・表示スライド3・スライド間の余白10pxの設定にします。
<p class="title">swiper06：slidesPerView: 3,spaceBetween: 10</p>
<div class="swiper-container swiper06">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/swiper01.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper02.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper03.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper04.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper05.jpg" alt=""></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>オプションでloop: true、slidesPerView: 3、spaceBetween: 10を指定します。spaceBetween: 10の指定でクラス名swiper-slideのdivタグにmargin-right: 10px;が適用されます。スライド間の余白はスライド要素にCSSでマージンを指定せず、このオプションのspaceBetweenで指定します。
var swiper06 = new Swiper('.swiper06', {
loop: true,
slidesPerView: 3,
spaceBetween: 10,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});■ swiper07：autoplay: {delay: 3000}
ページネーション・ナビゲーションボタンを表示します。また、自動再生ありの設定にします。
<p class="title">swiper07：autoplay: {delay: 3000}</p>
<div class="swiper-container swiper07">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/swiper01.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper02.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper03.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper04.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper05.jpg" alt=""></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>オプションでautoplay: {delay: 3000}を指定します。3000ミリ秒間隔で自動でスライドが切り替わります。自動再生ありの場合、delayの指定は必須です。また、ナビゲーションやページネーションのクリック、スライドのドラッグやスワイプで自動再生が停止します。
var swiper07 = new Swiper('.swiper07', {
autoplay: {
delay: 3000,
},
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});■ swiper08：autoplay: {delay: 3000,disableOnInteraction: false}
ページネーション・ナビゲーションボタンを表示します。また、自動再生ありの設定にして、ナビゲーションやページネーションのクリック、スライドのドラッグやスワイプでも自動再生が停止しないようにします。
<p class="title">swiper08：autoplay: {delay: 3000,disableOnInteraction: false}</p>
<div class="swiper-container swiper08">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/swiper01.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper02.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper03.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper04.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper05.jpg" alt=""></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>オプションでautoplayの設定にdisableOnInteraction: falseを追加します。これでナビゲーションやページネーションのクリック、スライドのドラッグやスワイプ等、ユーザーの操作にかかわらず自動再生が継続します。
var swiper08 = new Swiper('.swiper08', {
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});■ swiper09：autoplay: {delay: 6000},speed: 3500,effect: 'fade'
自動再生ありの設定にして、フェードイン・フェードアウトでギャラリーのようにスライドを切り替えます。ページネーション・ナビゲーションボタン・スクロールバーは表示しません。また、スライド切り替えとスライド表示の秒数をデフォルトの設定よりも長くします。
<p class="title">swiper09：speed: 3500,effect: 'fade'</p>
<div class="swiper-container swiper09">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/swiper01.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper02.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper03.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper04.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper05.jpg" alt=""></div>
</div>
</div>オプションでspeed: 3500、effect: 'fade'を指定します。スライドの切り替わるスピードはデフォルトで300ミリ秒ですが、speed: 3500の指定でゆっくり切り替わるように変更できます。またautoplay: {delay: 6000}を指定してスライドの表示時間を長くしています。デフォルトは3000ミリ秒です。
var swiper09 = new Swiper('.swiper09', {
speed: 3500,
effect: 'fade',
loop: true,
slidesPerView: 1,
centeredSlides: true,
allowTouchMove: false,
autoplay: {
delay: 6000,
}
});■ swiper10：thumbs: {swiper: swiper_thumbs}
ナビゲーションボタンを表示します。また、サムネイルを設置します。メインのスライダーとサムネイルのスライダーは別々に記述して、それぞれでswiperを起動します。
<p class="title">swiper10：thumbs: {swiper: swiper_thumbs}</p>
<div class="swiper-container swiper10">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/swiper01.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper02.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper03.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper04.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper05.jpg" alt=""></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper-container swiper_thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/swiper01.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper02.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper03.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper04.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/swiper05.jpg" alt=""></div>
</div>
</div>サムネイルのスライダー用にCSSを追加します。サムネイルのスライダーはクリック時に、クラス名swiper-slideのdivタグにクラス名swiper-slide-thumb-activeが追加されます。これを利用してクリック時の装飾をします。
.swiper_thumbs .swiper-slide {
position: relative;
cursor: pointer;
}
.swiper_thumbs .swiper-slide:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
}
.swiper_thumbs .swiper-slide.swiper-slide-thumb-active:before {
content: none;
}メインのスライダーのオプションでthumbs: {swiper: swiper_thumbs}を指定します。ただし、サムネイルのスライダーの変数swiper_thumbsはメインのスライダーの前に記述が必要です。後に記述するとメインのスライダーのオプションが未定義になってしまい、サムネイルが動作しません。
var swiper_thumbs = new Swiper('.swiper_thumbs', {
slidesPerView: 5,
});
var swiper10 = new Swiper('.swiper10', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: swiper_thumbs
}
});
