[備忘録]Swiper.js で矢印ボタンを外に出す方法 HTML CSS JavaScript

##業務で詰まったところの備忘録

###参考元
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