Swiper.jsでスライダーを実装する

swiper slider


スライダーを作成するライブラリは沢山ありますが、その中の一つであるswiper.jsはjQueryを使わずに実装できるのが魅力のひとつです。


当記事ではswiper.jsを使用したスライダーの実装方法を記します。


①必要なライブラリをCDNで読み込む

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

現時点(2022年9月時点)で最新のCDNを使用しています。
CDNの最新バージョンはこちらの公式サイトでご確認いただけます。
https://swiperjs.com/get-started#use-swiper-from-cdn



②HTMLで必要なパーツを用意する

<div class="swiper sample-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/sample1.png"></div>
        <div class="swiper-slide"><img src="img/sample2.png"></div>
        <div class="swiper-slide"><img src="img/sample3.png"></div>
    </div>
</div>
一番親要素のsample-sliderクラス以外はクラス名を合わせておかないと、動かなかったり、スタイルが崩れたりするので要注意です。




③Javascriptでスライダーにする

第一引数(.sample-sliderの部分)にはHTMLで記述したスライダーパーツの一番親のクラスを指定します。

const swiper = new Swiper('.sample-slider', {

})


スライダーになりました。スワイプするとスライドが動くと思います。

slide_image1
slide_image2
slide_image3





④CSSでスタイルを整える

CSSでスライダーの横幅を調整します。
横幅をパーセントで指定することでレスポンシブなスライダーができます。

.sample-slider{
    width:70%;
}
.sample-slider img{
    width: 100%;
}


シンプルなレスポンシブスライダーが完成しました!

slide_image1
slide_image2
slide_image3






⑤ナビゲーションを表示する

Swiper.jsでは左右の矢印をナビゲーションといいます。

<div class="swiper sample-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/sample1.png"></div>
        <div class="swiper-slide"><img src="img/sample2.png"></div>
        <div class="swiper-slide"><img src="img/sample3.png"></div>
    </div>
    <div class="swiper-button-prev"></div>  <!-- 追記 -->
    <div class="swiper-button-next"></div>  <!-- 追記 -->
</div>
const swiper = new Swiper('.sample-slider', {
    navigation: {                           //追記
        nextEl: ".swiper-button-next",      //追記
        prevEl: ".swiper-button-prev",      //追記
    },                                      //追記
})


ナビゲーション(矢印)が表示されました。

slide_image1
slide_image2
slide_image3





ナビゲーションをカスタマイズしたい場合はこちら
Swiperスライダーの矢印を任意の画像でカスタマイズする方法
Swiperスライダーの矢印のサイズや位置や色を変更する





⑥ページネーションを表示する

Swiper.jsでは現在のスライド位置を示すドットをページネーションといいます。

<div class="swiper sample-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/sample1.png"></div>
        <div class="swiper-slide"><img src="img/sample2.png"></div>
        <div class="swiper-slide"><img src="img/sample3.png"></div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-pagination"></div>   <!-- 追記 -->
</div>
const swiper = new Swiper('.sample-slider', {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {                       //追記
        el: '.swiper-pagination',       //追記
    },                                  //追記
})


ページネーション(ドット)が表示されました。

slide_image1
slide_image2
slide_image3





ページネーションをカスタマイズしたい場合はこちら
Swiperスライダーのページネーションをカスタマイズする
Swiperスライダーのページネーションのサイズや位置や色を変更する





⑦スライダーをループさせる

よく使われるオプションの一つとしてループオプションがあります。
有効化することで、最後のスライドの続きに最初のスライドが再び来るようになります。
loop: trueを追加します。

const swiper = new Swiper('.sample-slider', {
    loop: true,         //追記
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {
        el: '.swiper-pagination',
    },
})


スライダーがループするようになりました。

slide_image1
slide_image2
slide_image3






⑧スライダーを自動再生にする

よく使われるオプションとしてもう一つ自動再生オプションがあります。
delayの数値で次のスライドに切り替わるまでの時間が決まります。
以下の場合は2秒ごとにスライドが自動で切り替わります。

const swiper = new Swiper('.sample-slider', {
    loop: true,
    autoplay: {         //追記
        delay: 2000,    //追記
    },                  //追記
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {
        el: '.swiper-pagination',
    },
})


スライダーが自動再生になりました。

slide_image1
slide_image2
slide_image3





ソースコード全文

最後にソースコード全文を載せておきます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<style>
    .sample-slider{
        width:70%;
    }
    .sample-slider img{
        width: 100%;
    }
</style>

<div class="swiper sample-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/sample1.png"></div>
        <div class="swiper-slide"><img src="img/sample2.png"></div>
        <div class="swiper-slide"><img src="img/sample3.png"></div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-pagination"></div>
</div>

<script>
    const swiper = new Swiper('.sample-slider', {
        loop: true,                         //ループ
        autoplay: {                         //自動再生
            delay: 2000,  
        },   
        navigation: {                       //ナビゲーション(矢印)
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        pagination: {                       //ページネーション(ドット)
            el: '.swiper-pagination',
        },
    })
</script>





以上、Swiper.jsでスライダーを実装する方法でした。

スポンサーリンク

You can subscribe by SNS

スポンサーリンク

*