業務で詰まったところの備忘録
参考元
https://garigaricode.com/swiper/
https://www.youtube.com/watch?v=NcdYgbgvq4k
備忘録
Swiper.js では通常、スライドを動かす矢印ボタンはSwiper要素の内側置かれている。
実装していたWEBページの仕様上、この矢印をSwiper要素の外側に出す必要があった。
やり方
1. 基本の要素
Swiper.jsの基本要素に前へ矢印と次へ矢印のボタンをつけたもの
(swiper-button-prev, swiper-button-next)
Swiper.html
<!-- Swiper START -->
<div class="swiper-container">
<!-- メイン表示部分 -->
<div class="swiper-wrapper">
<!-- 各スライド -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- Swiper END -->
2. 全体をdivタグで囲む(クラス名は任意)
Swiper.html
<div class='swiper-wrap'>
<!-- Swiper START -->
<div class="swiper-container">
<!-- メイン表示部分 -->
<div class="swiper-wrapper">
<!-- 各スライド -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- Swiper END -->
</div>
3.ボタン要素（swiper-button-prev と swiper-button-next）を swiper-container の兄弟要素にする。
ボタン要素（swiper-button-prev と swiper-button-next）を クラス名swiper-containerというdivタグの兄弟要素にしたいので、ボタン要素を同階層に持ってきます。（一つ外に出してやる。）
Swiper.html
<div class='swiper-wrap'>
<!-- Swiper START -->
<div class="swiper-container">
<!-- メイン表示部分 -->
<div class="swiper-wrapper">
<!-- 各スライド -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- Swiper END -->
</div>
4.Swiper-wrap に対してposition relative を指定
CSSにて最上位に指定したSwiper-wrapに対してposition relativeを指定、理由としては子要素であるボタン要素にはposition absoluteがデフォルトで指定されている。
（要素の位置を絶対値で指定する方法）position についてはこちら
よってボタンの位置の調整もスタイルにposition absolute を指定して top や left で調整。
5.矢印ボタンがスライダーの外に出ればOK
上記のposition relative と position absolute を使って矢印ボタンがスライダーの外に出ればOK
↧