ページネーションを全体を囲う要素の中に配置して、swiperと紐づけを行い、swiperの領域外に配置する方法を見ていきます。
- swiper-paginationをmy-carouselの中に配置する
- ページネーションをswiperと紐づけるオプションを追加する（pagination: {el: .swiper-pagination}）
- ドットをクリックしてスライドが切り替わるオプションを追加する（pagination: {clickable: true}）
- ページネーションをswiperの領域外に配置するためにCSSを設定する（position: absolute, bottom: 24px）
- ページネーションの詳細度を考慮して、CSSのセレクターを修正する（.my-carousel.swiper-pagination）
素材ファイルをダウンロードするにはプレミアムプランへの登録が必要です
詳しくみるソースコードを閲覧するにはプレミアムプランへの登録が必要です
詳しくみるデモを閲覧するにはプレミアムプランへの登録が必要です
詳しくみる