swiper-container外部にnavigationやbulletを配置する方法

Swiperは、最も人気のあるスライダーライブラリの一つであり、タッチ対応のスライダーやカルーセルを簡単に実装できる特長があります。デフォルトの設定では、Swiperのnavigationやbulletはswiper-containerの内部に配置されます。しかし、デザインの要件によっては、これらの要素をswiper-containerの外部に配置したい場面があります。

幸いにも、Swiperはこのようなカスタマイズに非常に柔軟です。navigationやbulletをswiper-containerの外部に配置する場合、適切にセレクタを指定してSwiperのオプションを設定するだけで実現できます。

const swiper = new Swiper('.swiper-container', {
    navigation: {
        nextEl: '.custom-next',
        prevEl: '.custom-prev',
    },
    pagination: {
        el: '.custom-pagination',
        clickable: true,
    },
});

このように、.custom-next、.custom-prev、.custom-paginationなどのクラスを持つ要素を任意の場所に配置すれば、Swiperのnavigationやbulletとして機能します。

この方法を利用することで、デザインの自由度を高め、ユーザビリティの向上やブランディングの強化など、さまざまな目的に合わせたカスタマイズが可能となります。