[js]swiper.jsの矢印をスライドの外側に設置する方法

かんたんだよ

前提
どういうアレか
調整方法

前提

現状最新版バージョンの7でやっていく。
多分旧バージョンでもやれる。

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

どういうアレか

組み方の理解から。

    <div class="swiper mySwiper">
      <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 class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>

「.swiper-button-next」「.swiper-button-prev」が矢印になる。

親要素の「.swiper」に「position: relative;」、矢印に「position: absolute;」をつけることで両端中央に設置してある。

「.swiper」には「overflow: hidden;」が付いていて、これでスライド部のめっちゃ長いやつの表示領域を調整してるんだけど、副作用として矢印を外側に持っていくと非表示になってしまう。

どうにかしようぜっていう話。

調整方法

親要素を追加する
矢印の階層を一つ上げる
cssで調整する

これで解決する。

<div class="wrap">
    <div class="swiper mySwiper">
      <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 class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

今回は「.wrap」を足した。
矢印の階層を一つ上げて、.swiperと同階層にする。これでoverflow:hidden;から開放される。

.wrap{
    width: calc(100% - 80px);
    margin: 0 auto;
    position: relative;
}
.wrap .swiper-button-next{
    right: -40px;
}
.wrap .swiper-button-prev{
    left: -40px;
}

追加した親要素にposition:relative;を与えて、矢印を設置するスペースを作って（40px）、そこに矢印を配置する。幅の調整をしないと矢印が画面外に消えちゃう恐れがあるからね。まあそこはデザイン次第なので環境に合わせてやっていく。

これでおしまい。