今回は、本記事のサムネイル画像のような「Swiperで左右に切れた画像を表示させる方法」について解説していきます。

Swiperでのレイアウトのバリエーションを増やすことが出来るので、是非参考にしてください。

Swiperで左右に切れた画像を表示させる方法

完成形はこちらです。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

中央に1枚のスライドが表示され、左右に切れた画像が表示されていることが分かるでしょう。

それでは早速作り方を見ていきましょう。

HTML

HTMLコードはこちら。

<div class="swiper">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide1">スライド1</div>
            <div class="swiper-slide swiper-slide2">スライド2</div>
            <div class="swiper-slide swiper-slide3">スライド3</div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</div>

これはよくあるSwiperの雛形のコードです。

JavaScript

左右に切れた画像を表示させるコードはこちら。

var mySwiper = new Swiper('.swiper-container', {
	slidesPerView: 2,
	spaceBetween: 30,
	centeredSlides: true,
	initialSlide: 1,
	loop: true,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
});

slidesPerViewで2を指定します。

spaceBetweenにはスライドの余白を指定することが出来て今回は30pxとしました。

centeredSlidesをtrueにすることで、スライドを中央に表示させます。

initialSlideに1を指定したら、上記のサンプルのように左右に切れた画像が表示されるスライダーが完成するでしょう。

まとめ

以上が、「Swiperで左右に切れた画像を表示させる方法」でした。

簡単に出来るので、是非試してみてください。