中央の画像を拡大表示するカルーセル_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をアレンジして実装しました。
どなたかの参考になれば幸いです。