Swiperスライダーの矢印とドットを外に出す方法

Swiper slider


Swiperスライダーのナビゲーション(矢印)とページネーション(ドット)をスライドの外に配置したい時があると思います。
当記事ではその方法をデモを交えながら解説します。

通常の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>
slide_image1
slide_image2
slide_image3



②HTMLの構造を変更する

デフォルトでswiperクラスにoverflow:hiddenがついており、これはswiperスライダーにおいて外せないものなので、ナビゲーションとページネーションのパーツを外に移動します。

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

position:absoluteが設定されているのでナビゲーションとページネーションがどこかに飛んで行ってしまいました。CSSで調整する必要があります。

slide_image1
slide_image2
slide_image3



③CSSでナビゲーションとページネーションの位置を調整する

2行目で一番親にrelativeを設定します。(矢印やドットが飛んでいかないように)
7,10行目で矢印の位置を調整しています。
13行目でドットの位置を調整しています。

.swiper-container{
    position: relative;
    width: 70%;
    margin: 0 auto;
}
.swiper-container .swiper-button-prev{
    left: -40px;
}
.swiper-container .swiper-button-next{
    right: -40px;
}
.swiper-container .swiper-pagination{
    bottom: -30px!important;
}
.sample-slider{
    /* width:70%; */    /* 削除 */
}

ナビゲーションとぺージネーションがスライドの外に配置されました!

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>
    .swiper-container{
        position: relative;
        width: 70%;
        margin: 0 auto;
    }
    .swiper-container .swiper-button-prev{
        left: -40px;
    }
    .swiper-container .swiper-button-next{
        right: -40px;
    }
    .swiper-container .swiper-pagination{
        bottom: -30px!important;
    }
    .sample-slider img{
        width: 100%;
    }
</style>


<div class="swiper-container">                          
    <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>
    <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スライダーの矢印とドットを外に出す方法でした。

下記記事では矢印とページネーション(ドット)をカスタマイズする方法を記しています。
Swiperスライダーの矢印をカスタマイズする方法
Swiperスライダーのページネーションをカスタマイズする


また、下記記事ではswiper.jsで作成できる様々なスライダーを紹介しています。
Swiperスライダーのデモ16選

You can subscribe by SNS

スポンサーリンク

人気記事

*