左右に見え隠れするスライダーを高さ固定で実装する方法【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を使ったらあっという間に解決!
是非参考にしてみてください。
以上で解説を終わります。