Swiperスライダーの矢印を任意の画像でカスタマイズする方法

swiper arrow customize

Swiper.jsで作成したスライダーのナビゲーション(矢印)を任意の画像でカスタマイズする方法についてデモを交えながら解説します。


通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swiper.jsを初めて使う方はこちらから先に参考いただければと思います。
Swiper.jsでスライダーを実装する



①通常のSwiperスライダーを作成

わかりやすいように、最初に通常のSwiperスライダーを作成して、そこから変更を加えていきます。

<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-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

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

通常のSwiperスライダーができました。

slide_image1
slide_image2
slide_image3




②矢印を画像タグで追加

上記HTMLに画像タグを追加します。
箇所はswiper-button-prevクラスとswiper-button-nextクラスの中になります。

<div class="swiper-button-prev">
    <img src="img/arrow_left.png">    <!--追記-->
</div>
<div class="swiper-button-next">
    <img src="img/arrow_right.png">   <!--追記-->
</div>

矢印に任意の矢印画像が追加されました。

slide_image1
slide_image2
slide_image3




③デフォルトの矢印を消す

デフォルトの矢印が入ったままなのでこれを消します。
swiper-button-prevクラスとswiper-button-nextクラスのafter疑似要素でデフォルトの矢印が設定されてるので、これを無効化します。

.sample-slider [class^="swiper-button-"]::after{
    content: "";
}

デフォルトの矢印が消えました。

slide_image1
slide_image2
slide_image3




④矢印のサイズと位置を調整

CSSで矢印のサイズと位置を調整します。

/*矢印のサイズ調整*/
.sample-slider [class^="swiper-button-"]{
    width: 55px;
    height: 55px;
}

/*矢印の位置調整*/
.sample-slider .swiper-button-next{
    right: -5px;
}
.sample-slider .swiper-button-prev{
    left: -5px;
}

矢印のカスタマイズが完了しました!

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%;
    }
    /*デフォルトの矢印を消す*/
    .sample-slider [class^="swiper-button-"]::after{
        content: "";
    }
    /*矢印のサイズ調整*/
    .sample-slider [class^="swiper-button-"]{
        width: 55px;
        height: 55px;
    }
    /*矢印の位置調整*/
    .sample-slider .swiper-button-next{
        right: -5px;
    }
    .sample-slider .swiper-button-prev{
        left: -5px;
    }
</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-pagination"></div>
    <div class="swiper-button-prev">
        <img src="img/arrow_left.png">    <!--任意の矢印画像-->
    </div>
    <div class="swiper-button-next">
        <img src="img/arrow_right.png">   <!--任意の矢印画像-->
    </div>
</div>

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




以上、Swiperスライダーの矢印を任意の画像でカスタマイズする方法でした。


今回は矢印を任意の画像でカスタマイズすることがメインでしたが、下記の記事では矢印のサイズ位置を調整する方法を解説しております。
Swiperスライダーの矢印のサイズや位置や色を変更する


ページネーションを任意の画像でカスタマイズしたい場合下記の記事が参考になるかと思います。
Swiperスライダーのページネーションを任意の画像でカスタマイズする

スポンサーリンク

レバテックキャリアの広告画像

You can subscribe by SNS

スポンサーリンク

コメント

コメントを残す

*