中央の画像を拡大表示するカルーセル_swiper
左右が見切れるスライダーの、中央の画像が拡大するようにアレンジします。
やりたいこと
PC表示は5枚の画像に左右の画像を合わせて7枚表示させ、スマホの場合は3枚に左右の画像を合わせて5枚表示させる。
いずれも中央の画像は拡大させるが、画像の左右のmarginは変更させない。サンプル参照
サンプルコード
<div class="mySwiper swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/cat_1.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/cat_2.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/cat_3.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/cat_4.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/cat_5.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/cat_6.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/cat_7.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/cat_8.jpg" alt=""></div>
</div>
</div>
<style>
.swiper-wrapper {
margin-left: -4%;//※4
}
.swiper-slide {
width: 15.6666667% !important;//※2
margin-right: .5%;
margin-left: .5%;
padding-top: 2.5%;//※画像を上下を調整
opacity: .8;
}
.swiper-slide.swiper-slide-active {
width: 23.6666667% !important;//※3
padding-top: 0;//※画像を上下を調整
opacity: 1;
}
.swiper-slide img {
width: 100%;
}
@media only screen and (max-width: 768px) {
.swiper-wrapper {
margin-left: -3%;//※4
}
.swiper-slide {
width: 24% !important;//※2
}
.swiper-slide.swiper-slide-active {
width: 30% !important;//※3
}
}
</style>
<script>
let swiper = new Swiper('.mySwiper', {
slidesPerView: 6,//※1、※必須
centeredSlides: true,//※必須
loop: true,//※必須
speed: 400,
autoplay: {
delay: 4000,
},
breakpoints: {
768: {
slidesPerView: 4,//※1
},
},
});
</script>
解説
- swiperのslidesPerViewを設定する。
（※1/7枚表示させる場合、設定としては”slidesPerView: 6”とする。） - cssで.swiper-slideのwidth（横幅をslidesPerViewを設定数で割った数値）を変更する。
（※2/100％÷6=16.6666667%となるが、左右のmarginを0.5％分とっているので15.6666667%としている） - .swiper-slide-activeのwidth（拡大させたい分だけ※2にプラスさせる）を変更する。
（※3/今回は仮に8％プラスさせている） - .swiper-wrapperの位置を左にずらして（.swiper-slide-activeにプラスした値の半分）全体を中央にもってくる。
（※4/8％÷2=4％となるので-4％）
slickやswiperで中央に画像が来たときに、transform:scale()を使う方法はよく見るのですが、そうすると左右のmarginが狭まるため、今回の要件には合わず、swiperをアレンジして実装しました。
どなたかの参考になれば幸いです。
