左右に見え隠れするスライダーを高さ固定で実装する方法【swiperを使用】

こんにちは！カスミです。

さて、以下のような疑問をお持ちでしょうか？

左右に見え隠れするスライダーを実装したけど、
デバイス幅によってスライダー要素が大きく可変してしまう。。
高さを固定したい！

本記事では、swiperプラグインを使って、高さ固定・左右に見え隠れするスライダーの実装方法について、codepenを使い解説します。

codepenでのスライダー実装例

See the Pen swiper 左右見せスライダー by Kohei (@kouk05) on CodePen.dark

コードペンでの実装例です。

実際のデモ表示はこちら（PCでご覧ください）
https://codepen.io/kouk05/pen/ZEQMzjV

詳細については以下になります。

swiperプラグインを準備

以下サイト様よりswiper.min.css、swiper.min.jsをダウンロードもしくはCDNをコピーし、head内に貼り付けましょう。

https://cdnjs.com/libraries/Swiper

※スライダーの実装にはjqueryを使います。
jqueryも、実装する環境に用意しておいてください。

htmlを準備

<div class="swiper-area">
<div class="container">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <a class="trans" href="#">
            <img src="http://placehold.jp/24/cc9999/333333/1050x300.png" alt="スライダー画像01" />
        </a>
      </div>
      <div class="swiper-slide">
        <a class="trans" href="#">
            <img src="https://placehold.jp/24/daffff/333333/1050x300.png" alt="スライダー画像01" />
        </a>
      </div>
      <div class="swiper-slide">
        <a class="trans" href="#">
             <img src="https://placehold.jp/24/feeb99/333333/1050x300.png" alt="スライダー画像01" />
        </a>
      </div>
      <div class="swiper-slide">
        <a class="trans" href="#">
            <img src="https://placehold.jp/24/ceff99/333333/1050x300.png" alt="スライダー画像01" />
        </a>
      </div>
    </div>
  </div>
</div>
        <div class="swiper-button-arrow">
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
        <div class="swiper-ui-posi">
          <div class="swiper-pagination"></div>
        </div>
</div>

とりあえず、上記をスライダーを入れたい場所にコピペ。
imgタグのところに、入れたいスライダー要素を入れます。

CSSを当てましょう

.swiper-area {
  overflow: hidden;
  position: relative;
}
.container {
  position: relative;
  margin: 0 auto;
  max-width: 1050px;
  width: 100%;
}
.swiper-container {
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
}
.swiper-slide {
  opacity: 0.7;
  margin-right: 0 !important;
}
.swiper-slide-active {
  opacity: 1;
}
.swiper-button-arrow {
  max-width: 1050px;
  margin: auto;
}
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: "";
}
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
  content: "";
}
.swiper-button-next {
  background-image: url(http://kasumiblog.xsrv.jp/codepen/images/arrow_rig.png);
background-size: 50px;
width: 50px;
height: 50px;
  right: 0px;
}
.swiper-button-prev {
background-image: url(http://kasumiblog.xsrv.jp/codepen/images/arrow_lft.png);
background-size: 50px;
width: 50px;
height: 50px;
left: 0;
}
.swiper-pagination-bullets {
  position: unset;
  top: unset;
  bottom: 0px;
  left: 0;
  right: 0;
}
.swiper-pagination-bullet {
  margin: 0 5px;
}

次に上記CSSを先ほどのhtmlに反映させます。

max-width: 1050px;と指定してある部分が、中央に配置されるスライダー要素の横幅になりますので、適選変更してください。

これで、1050px以上のデバイス幅の時、高さは固定されたまま、左右のスライダー要素の横の面積が見えてくる形になります。

JSコードを書いてスライダーを起動

    window.addEventListener(
      "load",
      function() {
        var swiper = new Swiper(".swiper-container", {
          loop: true,
          slidesPerView: "auto",
          speed: 1000,
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
          pagination: {
            el: ".swiper-pagination",
            type: "bullets",
            clickable: true,
          },
        });
      },
      false
    );

後は上記をscript内にコピペし、スライダーを起動しましょう！

以上で完成です。

まとめ

筆者はスライダーを実装するとき、slickプラグインを使うのですが、
左右に見え隠れするスライダーを実装するとき、
slickだと高さを固定できなくて四苦八苦してました。。

そこで本記事でも紹介しているswiperを使ったらあっという間に解決！

是非参考にしてみてください。

以上で解説を終わります。