Bloosh Company

Development>WordPress>フロントエンド

swiper.js スマホ版だけレスポンシブにしたい

, , , , ,

jQuery不要のswiper.jsを使った事例。
基本の使い方はこちら
 
・PC版は比率を変えたくない。
・スマホ版は画面幅に合わせてレスポンシブにしたい。
・PC版の画像1枚の大きさより画面幅が小さくなったらスマホ版に切り替える。
 
という場合。
※例として、PC版の画像1枚の大きさを1024px * 768pxとして進めます。


 

HTML側の設定


<div id="slider">

	<div class="swiper-container">
		<div class="swiper-wrapper">

			<タグ class="swiper-slide"></タグ>
			<タグ class="swiper-slide"></タグ>
			<タグ class="swiper-slide"></タグ>

		</div>
	</div>

</div>

ポイントは.swiper-containerさらに入れ子にしてるところ。例では#sliderというID名。
.swiper-slideは画像です。<picture>または <img>srcsetsizesでレスポンシブに。
 

swiper.jsの設定

スライドを動かすための、JavaScriptの設定。


const swiper = new Swiper('.swiper-container', {
	centeredSlides: true,
	loop: true,
	slidesPerView: 1.25,
	spaceBetween: 0,
	effect:"slide",
	breakpoints: {
		1025: {
			width:1024,
			height:768,
			slidesPerView: "auto",
		}
	}
});

ポイントはbreakpointsを使う点です。swiper.jsのbreakpointsは、「〇〇px以上~」という切り替えで活用します。なのでスマホ版がまず基本となり、PC版の動作をbreakpointsの中に書いていきます。
例では画面幅1025px以上で固定表示に切り替わります。スマホ版では常に画像は画面比率に応じて伸縮します。slidesPerView: 1.25にしてるので左右に前後の画像がちょっと見えてるということです。centeredSlides: trueもセットで設定してください。
 

CSS側の設定


#slider{
	width:100%;
	overflow: hidden;
}.swiper-container, .swiper-wrapper{
	margin: 0 auto;
}.swiper-slide img{
	max-width: 100%;
	height: auto;
}
@media screen and (min-width:  1025px){
	.swiper-wrapper{
		width:100%;
		padding-left:calc(50% - (1024px / 2));
		height:768px;
	}.swiper-slide{
		width:1024px !important;
		height:768px !important;
	}
}

#sliderは画面幅より小さくならないようにしてください。
.swiper-container, .swiper-wrappermargin: 0 auto;にして真ん中寄せにします。
画面幅が1025px以上になると、スライダーは固定表示になります。JSの設定でcenteredSlides: trueにしているのですが、なぜかスライダーが画面の左端に寄ってしまうため、padding-left:calc(50% – (1024px / 2));で真ん中寄せにしています。
 
1024や768の数字はお好みで変更してください。

swiper.js スマホ版だけレスポンシブにしたい #フロントエンド #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #css #JavaScript #swiperjs #スライダー #レスポンシブ #画像

<<次の記事

Welcart商品画像のフィルターフック

前の記事>>

svgをJSなし・インライン読み込みなしで自由に色を変更する方法!

Tweets by blooshcompany