【ver.11対応】サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（基礎編）

1. Swiperとは

2. 使うための準備

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

3. 基本の要素

<!-- Swiper START -->
<div class="swiper">
	<!-- メイン表示部分 -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		<div class="swiper-slide">Slide 4</div>
	</div>
</div>
<!-- Swiper END -->

const mySwiper = new Swiper('.swiper', {
});

/* 全体のスタイル */
.swiper-wrapper {
	width: 100%;
	height: 250px;
}
/* 全スライド共通スタイル */
.swiper-slide {
	color: #ffffff;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 250px;
}
/* 4の倍数＋1枚目のスライドのスタイル（1枚目、5枚目…） */
.swiper-slide:nth-child(4n+1) {
	background-color: #EECB27;
}
/* 4の倍数＋2枚目のスライドのスタイル（2枚目、6枚目…） */
.swiper-slide:nth-child(4n+2) {
	background-color: #E13239;
}
/* 4の倍数＋3枚目のスライドのスタイル（3枚目、7枚目…） */
.swiper-slide:nth-child(4n+3) {
	background-color: #1F1762;
}
/* 4の倍数＋4枚目のスライドのスタイル（4枚目、8枚目…） */
.swiper-slide:nth-child(4n+4) {
	background-color: #BEDAE5;
}

4. 縦方向のスライドにする

const mySwiper = new Swiper('.swiper', {
	direction: 'vertical',
	mousewheel: {
		forceToAxis: false,
		invert: false
	},
	keyboard: true
});

パラメータ解説

5. 前・次ボタンをつける

<!-- Swiper START -->
<div class="swiper">
	<!-- メイン表示部分 -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		<div class="swiper-slide">Slide 4</div>
	</div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>
<!-- Swiper END -->

const mySwiper = new Swiper('.swiper', {
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	}
});

パラメータ解説

【ver.11対応】サンプル付き！簡単にスライドを作れるライブ...

https://garigaricode.com/swiper_navigation

このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。 1. 前・次ページボタンのカスタマイズ1. 前・次ページボタンのカスタマイズ基本レイアウトはこう。Sample.1-1 Slide 1 Slide 2 Slide 3 Slide 4 const mySwiper11 = new Swiper('.sample11', { navigation: { nextEl: '.nextsample11', prevEl: '.prevsample11', }});HTML<!-- Swiper START --><div cl...

ガリガリコード

 

1 Post

48 Pockets

6. スライドの移動速度を変える

const mySwiper = new Swiper('.swiper', {
	speed: 3000,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	}
});

パラメータ解説

7. 逆方向に進むスライドを作る

<!-- Swiper START -->
<div class="swiper" dir="rtl">
	<!-- メイン表示部分 -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		<div class="swiper-slide">Slide 4</div>
	</div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>
<!-- Swiper END -->

8. ページネーションをつける

<!-- Swiper START -->
<div class="swiper">
	<!-- メイン表示部分 -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		<div class="swiper-slide">Slide 4</div>
	</div>
	<div class="swiper-pagination"></div>
</div>
<!-- Swiper END -->

const mySwiper = new Swiper('.swiper', {
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

パラメータ解説

const mySwiper = new Swiper('.swiper', {
	pagination: {
		el: '.swiper-pagination',
		type: 'fraction'
	}
});

const mySwiper = new Swiper('.swiper', {
	pagination: {
		el: '.swiper-pagination',
		type: 'progressbar'
	}
});

【ver.11対応】サンプル付き！簡単にスライドを作れるライブ...

https://garigaricode.com/swiper_navigation

このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。 1. 前・次ページボタンのカスタマイズ1. 前・次ページボタンのカスタマイズ基本レイアウトはこう。Sample.1-1 Slide 1 Slide 2 Slide 3 Slide 4 const mySwiper11 = new Swiper('.sample11', { navigation: { nextEl: '.nextsample11', prevEl: '.prevsample11', }});HTML<!-- Swiper START --><div cl...

ガリガリコード

 

1 Post

48 Pockets

9. スクロールバーを付ける

<!-- Swiper START -->
<div class="swiper">
	<!-- メイン表示部分 -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		<div class="swiper-slide">Slide 4</div>
	</div>
	<div class="swiper-scrollbar"></div>
</div>
<!-- Swiper END -->

const mySwiper = new Swiper('.swiper', {
	scrollbar: {
		el: '.swiper-scrollbar',
		hide: false,
		draggable: true
	}
});

パラメータ解説

【ver.11対応】サンプル付き！簡単にスライドを作れるライブ...

https://garigaricode.com/swiper_navigation

このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。 1. 前・次ページボタンのカスタマイズ1. 前・次ページボタンのカスタマイズ基本レイアウトはこう。Sample.1-1 Slide 1 Slide 2 Slide 3 Slide 4 const mySwiper11 = new Swiper('.sample11', { navigation: { nextEl: '.nextsample11', prevEl: '.prevsample11', }});HTML<!-- Swiper START --><div cl...

ガリガリコード

 

1 Post

48 Pockets

10. 自動でスライドの高さに合わせる

<!-- Swiper START -->
<div class="swiper">
	<!-- メイン表示部分 -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		<div class="swiper-slide">Slide 4</div>
	</div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
	<div class="swiper-pagination"></div>
</div>
<!-- Swiper END -->

const mySwiper = new Swiper('.swiper', {
	autoHeight: true,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

パラメータ解説

/* 4の倍数＋1枚目のスライドの高さ（1枚目、5枚目…） */
.swiper-slide:nth-child(4n+1) {
	height: 250px;
	line-height: 250px;
}
/* 4の倍数＋2枚目のスライドの高さ（2枚目、6枚目…） */
.swiper-slide:nth-child(4n+2) {
	height: 100px;
	line-height: 100px;
}
/* 4の倍数＋3枚目のスライドの高さ（3枚目、7枚目…） */
.swiper-slide:nth-child(4n+3) {
	height: 200px;
	line-height: 200px;
}
/* 4の倍数＋4枚目のスライドの高さ（4枚目、8枚目…） */
.swiper-slide:nth-child(4n+4) {
	height: 150px;
	line-height: 150px;
}

11. 最初に表示するスライドを指定する

const mySwiper = new Swiper('.swiper', {
	initialSlide: 2,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

パラメータ解説

12. ループさせる

const mySwiper = new Swiper('.swiper', {
	loop: true,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

パラメータ解説

<!-- Swiper START -->
<div class="swiper">
	<!-- メイン表示部分 -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide" style="background-color: #EECB27;">Slide 1</div>
		<div class="swiper-slide" style="background-color: #E13239;">Slide 2</div>
		<div class="swiper-slide" style="background-color: #1F1762;">Slide 3</div>
		<div class="swiper-slide" style="background-color: #BEDAE5;">Slide 4</div>
	</div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
	<div class="swiper-pagination"></div>
</div>
<!-- Swiper END -->

13. 自動で動かす

const mySwiper = new Swiper('.swiper', {
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		pauseOnMouseEnter: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

パラメータ解説

14. 一度に複数のスライドを表示する

const mySwiper = new Swiper('.swiper', {
	slidesPerView: 3,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

パラメータ解説

15. スライドの間隔を設定する

const mySwiper = new Swiper('.swiper', {
	spaceBetween: 10,
	slidesPerView: 3,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

パラメータ解説

const mySwiper = new Swiper('.swiper', {
	slidesOffsetBefore: 50,
	slidesOffsetAfter: 50,
	slidesPerView: 3,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

【ver.11対応】サンプル付き！簡単にスライドを作れるライブ...

https://garigaricode.com/swiper_navigation

このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。 1. 前・次ページボタンのカスタマイズ1. 前・次ページボタンのカスタマイズ基本レイアウトはこう。Sample.1-1 Slide 1 Slide 2 Slide 3 Slide 4 const mySwiper11 = new Swiper('.sample11', { navigation: { nextEl: '.nextsample11', prevEl: '.prevsample11', }});HTML<!-- Swiper START --><div cl...

ガリガリコード

 

1 Post

48 Pockets

16. 一度に動かすスライド数を設定する

const mySwiper = new Swiper('.swiper', {
	slidesPerGroup: 3,
	slidesPerView: 3,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

パラメータ解説

17. 現在のスライドを中央に表示する

const mySwiper = new Swiper('.swiper', {
	centeredSlides: true,
	slidesPerView: 3,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

パラメータ解説

18. スライドが切り替わるときのアニメーションを指定する

パラメータ解説

const mySwiper = new Swiper('.swiper', {
	effect: 'slide',
	speed: 2000,
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

const mySwiper = new Swiper('.swiper', {
	effect: 'fade',
	speed: 2000,
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

const mySwiper = new Swiper('.swiper', {
	effect: 'fade',
	fadeEffect: {
		crossFade: true
	},
	speed: 2000,
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

const mySwiper = new Swiper('.swiper', {
	effect: 'cube',
	speed: 2000,
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

const mySwiper = new Swiper('.swiper', {
	effect: 'cube',
	cubeEffect: {
		shadow: false,
		slideShadows: false,
	},
	speed: 2000,
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

const mySwiper = new Swiper('.swiper', {
	effect: 'cube',
	cubeEffect: {
		shadowOffset: 100,
		shadowScale: 0.2,
	},
	speed: 2000,
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

const mySwiper = new Swiper('.swiper', {
	effect: 'coverflow',
	slidesPerView: 3,
	speed: 2000,
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

const mySwiper = new Swiper('.swiper', {
	effect: 'coverflow',
	slidesPerView: 3,
	coverflowEffect: {
		slideShadows: false,
		rotate: 0,
		scale: 0.5,
		stretch: 80
	},
	speed: 2000,
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

const mySwiper = new Swiper('.swiper', {
	effect: 'coverflow',
	slidesPerView: 3,
	coverflowEffect: {
		depth: 500,
		modifier: 2,
	},
	speed: 2000,
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

const mySwiper = new Swiper('.swiper', {
	effect: 'flip',
	speed: 2000,
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

const mySwiper = new Swiper('.swiper', {
	effect: 'flip',
	flipEffect: {
		slideShadows: false,
		limitRotation: false
	},
	speed: 2000,
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

const mySwiper = new Swiper('.swiper', {
	effect: 'cards',
	speed: 2000,
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

const mySwiper = new Swiper('.swiper', {
	effect: 'cards',
	cardsEffect: {
		slideShadows: false,
		perSlideOffset: 3,
		perSlideRotate: 4
	},
	speed: 2000,
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

const mySwiper = new Swiper('.swiper', {
	effect: 'creative',
	creativeEffect: {
		prev: {
			translate: [0, '-100%', 0]
		},
		next: {
			translate: [0, '-100%', 0]
		}
	},
	speed: 2000,
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

const mySwiper = new Swiper('.swiper', {
	effect: 'creative',
	creativeEffect: {
		prev: {
			scale: 0
		},
		next: {
			scale: 0
		}
	},
	speed: 2000,
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

const mySwiper = new Swiper('.swiper', {
	effect: 'creative',
	creativeEffect: {
		prev: {
			scale: 0,
			translate: ['-100%', '100%', 0]
		},
		next: {
			opacity: 0,
			translate: ['100%', '100%', 0]
		}
	},
	speed: 2000,
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

19. 一度で好きな位置までスワイプ・スクロールできるようにする

const mySwiper = new Swiper('.swiper', {
	freeMode: true,
	slidesPerView: 3,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

パラメータ解説

20. 複数行のスライドにする

/* 全スライド共通スタイル */
.swiper-slide {
	height: 125px;
	line-height: 125px;
}

const mySwiper = new Swiper('.swiper', {
	slidesPerView: 3,
	grid: {
		rows: 2,
		fill: 'column'
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

パラメータ解説

const mySwiper = new Swiper('.swiper', {
	slidesPerView: 3,
	slidesPerGroup: 6,
	grid: {
		rows: 2,
		fill: 'column'
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

【ver.11対応】サンプル付き！簡単にスライドを作れるライブ...

https://garigaricode.com/swiper_multirow

このページでは、Swiperを複数行で表示するカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。 1. 列（縦方向）優先1. 列（縦方向）優先fill: 'column'を指定した時、またはfillを省略した時は、こういう並び順になります。Sample.1 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10 Slide 11 Slide 12 const mySwiper1 = new Swiper('.sample1', { grid: { fill: 'column', rows: 2 }, slidesPerView: 3...

ガリガリコード

 

2 Pockets

21. 画面幅によってレイアウトを変える

const mySwiper = new Swiper('.swiper', {
	slidesPerView:1,
	slidesPerGroup:1,
	spaceBetween:0,
	breakpoints: {
		480: {
			slidesPerView:3,
			slidesPerGroup:3,
			spaceBetween:5
		},
		500: {
			slidesPerView:4,
			slidesPerGroup:4,
			spaceBetween:20
		}
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

パラメータ解説

【ver.11対応】サンプル付き！簡単にスライドを作れるライブ...

https://garigaricode.com/swiper_multirow#go-to-5-e3818ae381bee38191efbc9aswipere381aee5868de4bd9ce68890e381abe381a4e38184e381a6

このページでは、Swiperを複数行で表示するカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。 1. 列（縦方向）優先1. 列（縦方向）優先fill: 'column'を指定した時、またはfillを省略した時は、こういう並び順になります。Sample.1 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10 Slide 11 Slide 12 const mySwiper1 = new Swiper('.sample1', { grid: { fill: 'column', rows: 2 }, slidesPerView: 3...

ガリガリコード

 

2 Pockets

22. 1ページに複数のSwiperを設置する

<!-- 1個目のSwiper START -->
	<!-- Swiper START -->
	<div class="swiper swiper1">
		<!-- メイン表示部分 -->
		<div class="swiper-wrapper">
			<!-- 各スライド -->
			<div class="swiper-slide">Slide 1</div>
			<div class="swiper-slide">Slide 2</div>
			<div class="swiper-slide">Slide 3</div>
			<div class="swiper-slide">Slide 4</div>
		</div>
		<div class="swiper-button-prev prev1"></div>
		<div class="swiper-button-next next1"></div>
		<div class="swiper-pagination page1"></div>
	</div>
	<!-- Swiper END -->
<!-- 1個目のSwiper END -->

<!-- 2個目のSwiper START -->
	<!-- Swiper START -->
	<div class="swiper swiper2">
		<!-- メイン表示部分 -->
		<div class="swiper-wrapper">
			<!-- 各スライド -->
			<div class="swiper-slide">Slide 1</div>
			<div class="swiper-slide">Slide 2</div>
			<div class="swiper-slide">Slide 3</div>
			<div class="swiper-slide">Slide 4</div>
		</div>
		<div class="swiper-button-prev prev2"></div>
		<div class="swiper-button-next next2"></div>
		<div class="swiper-pagination page2"></div>
	</div>
	<!-- Swiper END -->
<!-- 2個目のSwiper END -->

//1個目のSwiper
const mySwiper1 = new Swiper('.swiper1', {
	navigation: {
		nextEl: '.next1',
		prevEl: '.prev1'
	},
	pagination: {
		el: '.page1',
		type: 'bullets',
		clickable: true
	}
});

//2個目のSwiper
const mySwiper2 = new Swiper('.swiper2', {
	navigation: {
		nextEl: '.next2',
		prevEl: '.prev2'
	},
	pagination: {
		el: '.page2',
		type: 'bullets',
		clickable: true
	}
});

<!-- Swiper（メイン） START -->
<div class="swiper swiper1">
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		<div class="swiper-slide">Slide 4</div>
		<div class="swiper-slide">Slide 5</div>
		<div class="swiper-slide">Slide 6</div>
		<div class="swiper-slide">Slide 7</div>
		<div class="swiper-slide">Slide 8</div>
	</div>
	<div class="swiper-button-prev prev1"></div>
	<div class="swiper-button-next next1"></div>
</div>
<!-- Swiper（メイン） END -->

<!-- Swiper（サムネイル） START -->
<div thumbsSlider="" class="swiper swiper2">
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		<div class="swiper-slide">Slide 4</div>
		<div class="swiper-slide">Slide 5</div>
		<div class="swiper-slide">Slide 6</div>
		<div class="swiper-slide">Slide 7</div>
		<div class="swiper-slide">Slide 8</div>
	</div>
</div>
<!-- Swiper（サムネイル） END -->

/* Swiper（サムネイル）全体のスタイル */
.swiper2 {
	height: 80px;
	margin-top: 10px;
}
/* Swiper（サムネイル）スライドのスタイル */
.swiper2 .swiper-slide {
	width: 33.3%;
	height: 80px;
	line-height: 80px;
	filter: brightness(0.5);
}
/* Swiper（サムネイル）現在のスライドのスタイル */
.swiper2 .swiper-slide-thumb-active {
	filter: brightness(1);
}

const mySwiper2 = new Swiper(".swiper2", {
	watchSlidesProgress: true,
	spaceBetween: 10,
	slidesPerView: 3,
	freeMode: true
});
const mySwiper1 = new Swiper(".swiper1", {
	thumbs: {
		swiper: mySwiper2
	},
	spaceBetween: 10,
	navigation: {
		nextEl: ".next1",
		prevEl: ".prev1"
	}
});

パラメータ解説

23. 動的にスライドを追加・削除する

<!--コントロールボタン START-->
	<div>
		<a class="beforeadd">最初に追加</a>
		<a class="afteradd">最後に追加</a>
		<a class="after2add">最後に2個追加</a>
		<a class="secondremove">2番目を削除</a>
		<a class="removeall">全スライドを削除</a>
	</div>
<!--コントロールボタン END-->

const mySwiper = new Swiper('.swiper', {
	centeredSlides: true,
	slidesPerView: 3,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});
var start = 1;
var end = 4;
//最初に追加
document.querySelector('.beforeadd').addEventListener('click', function (e) {
	e.preventDefault();
	mySwiper.prependSlide('<div class="swiper-slide">Slide ' + (--start) + '</div>');
});
//最後に追加
document.querySelector('.afteradd').addEventListener('click', function (e) {
	e.preventDefault();
	mySwiper.appendSlide('<div class="swiper-slide">Slide ' + (++end) + '</div>');
});
//最後に2個追加
document.querySelector('.after2add').addEventListener('click', function (e) {
	e.preventDefault();
	mySwiper.appendSlide(['<div class="swiper-slide">Slide ' + (++end) + "</div>", '<div class="swiper-slide">Slide ' + (++end) + "</div>"]);
});
//2番目を削除
document.querySelector('.secondremove').addEventListener('click', function (e) {
	e.preventDefault();
	mySwiper.removeSlide(1);
});
//全スライドを削除
document.querySelector('.removeall').addEventListener('click', function (e) {
	e.preventDefault();
	mySwiper.removeAllSlides();
});

メソッド解説

24. Parallax効果をつける

<!-- Swiper START -->
<div class="swiper">
	<!-- 背景画像部分 -->
	<div class="parallax-bg" style="background-image:url(背景画像のURL)" data-swiper-parallax="-23%"></div>
	<!-- メイン表示部分 -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide">
			<div data-swiper-parallax="-300">Slide 1</div>
		</div>
		<div class="swiper-slide">
			<div data-swiper-parallax="-300">Slide 2</div>
		</div>
		<div class="swiper-slide">
			<div data-swiper-parallax="-300">Slide 3</div>
		</div>
		<div class="swiper-slide">
			<div data-swiper-parallax="-300">Slide 4</div>
		</div>
	</div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
	<div class="swiper-pagination"></div>
</div>
<!-- Swiper END -->

const mySwiper = new Swiper('.swiper', {
	parallax: true,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

パラメータ解説

/* 全体のスタイル */
.swiper-wrapper {
	width: 100%;
	height: 250px;
}
/* 全スライド共通スタイル */
.swiper-slide {
	color: #ffffff;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 250px;
}
/* 背景画像部分のスタイル */
.parallax-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 130%;
	height: 100%;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center;
}

25. スライドをズームさせる

Slide 2

Slide 4

<!-- Swiper START -->
<div class="swiper">
	<!-- メイン表示部分 -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide">
			<div class="swiper-zoom-container">
				<img src="画像のurl">
			</div>
		</div>
		<div class="swiper-slide">
			<div class="swiper-zoom-container">
				<div class="swiper-zoom-target">
					Slide 2
				</div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="swiper-zoom-container">
				<img src="画像のurl">
			</div>
		</div>
		<div class="swiper-slide">
			<div class="swiper-zoom-container">
				<div class="swiper-zoom-target">
					Slide 4
				</div>
			</div>
		</div>
	</div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
	<div class="swiper-pagination"></div>
</div>
<!-- Swiper END -->

const mySwiper = new Swiper('.swiper', {
	zoom: true,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

26. タイマーを表示する

<!-- Swiper START -->
<div class="swiper">
	<!-- メイン表示部分 -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		<div class="swiper-slide">Slide 4</div>
	</div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
	<div class="swiper-pagination"></div>
	<div class="autoplay-progress">
		<!--円を描く部分-->
		<svg viewBox="0 0 48 48">
			<circle cx="24" cy="24" r="20"></circle>
		</svg>
		<span><!--カウントダウン部分--></span>
	</div>
</div>
<!-- Swiper END -->

const progressCircle = document.querySelector(".autoplay-progress svg");
const progressContent = document.querySelector(".autoplay-progress span");
const mySwiper = new Swiper('.swiper', {
	on: {
		autoplayTimeLeft(s, time, progress) {
			progressCircle.style.setProperty(0, 1 - progress);
			progressContent.textContent = `${Math.ceil(time / 1000)}秒`;
		}
	},
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

/* 秒数カウントダウン */
.autoplay-progress {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 10;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
}

/* 円 */
.autoplay-progress svg {
	--progress: 0;
	position: absolute;
	left: 0;
	top: 0px;
	z-index: 10;
	width: 100%;
	height: 100%;
	fill: none;
	stroke-width: 4px;
	stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
	stroke-dasharray: 125.6;
	stroke-linecap: round;
	transform: rotate(-90deg);
	stroke: #ffffff;
}

27. トラブルシューティング

○○はできる？

下記関連ページもご参考に。

【ver.11対応】サンプル付き！簡単にスライドを作れるライブ...

https://garigaricode.com/swiper_navigation

このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。 1. 前・次ページボタンのカスタマイズ1. 前・次ページボタンのカスタマイズ基本レイアウトはこう。Sample.1-1 Slide 1 Slide 2 Slide 3 Slide 4 const mySwiper11 = new Swiper('.sample11', { navigation: { nextEl: '.nextsample11', prevEl: '.prevsample11', }});HTML<!-- Swiper START --><div cl...

ガリガリコード

 

1 Post

48 Pockets

【ver.11対応】サンプル付き！簡単にスライドを作れるライブ...

https://garigaricode.com/swiper_multirow

このページでは、Swiperを複数行で表示するカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。 1. 列（縦方向）優先1. 列（縦方向）優先fill: 'column'を指定した時、またはfillを省略した時は、こういう並び順になります。Sample.1 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10 Slide 11 Slide 12 const mySwiper1 = new Swiper('.sample1', { grid: { fill: 'column', rows: 2 }, slidesPerView: 3...

ガリガリコード

 

2 Pockets

それでもダメなら、公式ドキュメント（英語）を参考にするとできるかもしれません。

const mySwiper = new Swiper('.swiper', {
	preventClicks: false,
	preventClicksPropagation: false
});