レスポンシブ対応のスライダーが作れる「Swiper.js」の使い方

スライダーが作れるライブラリ「Swiper」を使えば、次のようなスライダーを簡単に作ることができます。

See the Pen
WNrMymv by KUBO (@KUBOGEN)
on CodePen.

Swiperの使い方

Swiperを使うには公式サイトよりファイルをダウンロードするか、CDNを読み込む必要があります。

CDNを使用する場合は以下のように読み込みます。（「swiper.min.css」は <head>〜</head>内で読み込み、「swiper.min.js」は </body>の直前などで読み込みます。）

ファイルをダウンロードする場合でも「Swiper.min.css」と「Swiper.min.js」を読み込めばOKです。

次にHTMLに以下のように記述します。

HTML
<div class=”swiper-container”>
　<div class=”swiper-wrapper”>
　　<!– Slides –>
　　<div class=”swiper-slide”>Slide 1</div>
　　<div class=”swiper-slide”>Slide 2</div>
　　<div class=”swiper-slide”>Slide 3</div>
　　…
　</div>

CSSをカスタマイズすることも可能です。

CSS
.swiper-container {
　width: 600px;
　height: 300px;
}

そして以下のようにスクリプトを記述することで、簡単にスライドを実装することができます。

JavaScript
var mySwiper = new Swiper(‘.swiper-container’, {
　direction: ‘vertical’,
　loop: true,
　pagination: {
　　el: ‘.swiper-pagination’,
　},
　navigation: {
　　nextEl: ‘.swiper-button-next’,
　　prevEl: ‘.swiper-button-prev’,
　},
　scrollbar: {
　　el: ‘.swiper-scrollbar’,
　},
})

色々なスライダーを実装できる

基本的な使い方だけ紹介しました。もう少し詳しい説明は別の機会にしたいと思います。

公式サイトにdemoがあり、ソースコードも載っているので、そちらも参考にしてください。

参考
Swiper Demos

Swiperの使い方

色々なスライダーを実装できる

Leave a Comment X