【Swiper】真ん中に2つのカード+両端が見切れたスライダーの作り方【デモあり】

SHARE

今回はスライダープラグインの王道、『Swiper』を使用して真ん中に2つのカード、両端が見切れたスライダーを実装したソースコードを公開いたします。

Swiperを使用した理由としてはコールバック関数が充実しており、こねくり回せばGSAPと連携した実装が可能であると思ったからです。（今回はGSAP関係ありません）

そういった今後の展望に向けた第一歩の記事となっています。ぜひ最後までご覧ください！

1.実装イメージ

実装イメージは以下の通りです。
レスポンシブ対応はしておりませんので『EDIT ON CODEPEN』から全画面表示し1440px以上のデバイスで閲覧することを推奨します。

See the Pen Swiper-customize by りょーすけ (@s_ryosuke_1242) on CodePen.

コピペしてすぐに実務で実装できるようにしております。
注意点としては予め、CDNや公式サイトからプラグインをダウンロードしておきましょう。

CDNはコチラ
バージョン指定してダウンロード

必要なファイルは『swiper-bundle.min.css』『swiper-bundle.min.js』の2つです

2.HTML

HTMLはコチラの通りになっています。比較的シンプルですね

<section class="slider__wrapper">
  <div class="swiper-container topPageStyle-swiper-container">
    <ul class="swiper-wrapper slider__items">
      <li class="swiper-slide"><span>No.01</span><div class="slider-img__wrapper"><img src="https://ryo-sukeblog.net/wp-content/uploads/2022/05/slider01-scaled.jpg" alt=""></div></li>
      <li class="swiper-slide"><span>No.02</span><div class="slider-img__wrapper"><img src="https://ryo-sukeblog.net/wp-content/uploads/2022/05/slider02.jpg" alt=""></div></li>
      <li class="swiper-slide"><span>No.03</span><div class="slider-img__wrapper"><img src="https://ryo-sukeblog.net/wp-content/uploads/2022/05/slider03.jpg" alt=""></div></li>
      <li class="swiper-slide"><span>No.04</span><div class="slider-img__wrapper"><img src="https://ryo-sukeblog.net/wp-content/uploads/2022/05/slider04.jpg" alt=""></div></li>
      <li class="swiper-slide"><span>No.05</span><div class="slider-img__wrapper"><img src="https://ryo-sukeblog.net/wp-content/uploads/2022/05/slider05.jpg" alt=""></div></li> 
      <li class="swiper-slide"><span>No.06</span><div class="slider-img__wrapper"><img src="https://ryo-sukeblog.net/wp-content/uploads/2022/05/slider06.jpg" alt=""></div></li>
      <li class="swiper-slide"><span>No.07</span><div class="slider-img__wrapper"><img src="https://ryo-sukeblog.net/wp-content/uploads/2022/05/slider07.jpg" alt=""></div></li>
      <li class="swiper-slide"><span>No.08</span><div class="slider-img__wrapper"><img src="https://ryo-sukeblog.net/wp-content/uploads/2022/05/slider08.jpg" alt=""></div></li>
    </ul>
    <div class="swiper-pagination"></div>
  </div>
</section>

3.CSS

次にCSSです。

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    width: 100%;
}
body{
    width: 100%;
}
main{
    width: 100%;
}
li{
    list-style: none;
}
.topPageStyle-swiper-container .swiper-slide{
    display: flex;
    flex-direction: column;
    align-items: end;
}
.topPageStyle-swiper-container{
    max-width: 1440px;
    width: 1440px;
    height: auto;
    background-color:skyblue;
    margin: 0 auto;
    padding: 50px 0 120px;
    overflow: hidden;
    position: relative;
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 0;
}
/* ページネーションの余白 */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 7.5px;
}
/* ページネーションのサイズと色 */
.swiper-pagination-bullet{
    background-color: white;
    opacity: 1;
    height: 10px;
    width: 10px;
}
.swiper-pagination-bullet-active {
    background-color: #A75151;
}

.topPageStyle-swiper-container .swiper-wrapper li{
    margin: 0 20px;
}
.topPageStyle-swiper-container .slider-img__wrapper{
    width: 360px;
    height: 480px;
    overflow: hidden;
    border-radius: 10px;
}
.topPageStyle-swiper-container .slider-img__wrapper img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.topPageStyle-swiper-container .swiper-wrapper li:nth-child(odd){
    transform: translate(-22.5%,-28.5px);
}
.topPageStyle-swiper-container .swiper-wrapper li:nth-child(even){
    transform: translate(-22.5%,28.5px);
}

4.JavaScript

最後にJavaScriptです

var topStyle = new Swiper('.topPageStyle-swiper-container', {
	slidesPerView: 4,
  	parallax: true,
	speed: 3000,
	grabCursor: true,
	autoplay: {
		delay: 2000,
		disableOnInteraction: false,
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	},
});
var slider__items = document.querySelector('.slider__items');
topStyle.on('slideChange',function(){
	console.log(topStyle.realIndex);
	var move = -400*(topStyle.realIndex);
	slider__items.style.transform = 'translate('+ move +'px,0)';
})

前の記事

【GSAP】片側が固定されるスライダー【実務ですぐ使える！！】

次の記事

【Swiper】GSAPと組み合わせてページネーションを改良