Swiper.jsの基本的な使い方

本家サイト

https://swiperjs.com/

読み込み

<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/jquery-1.12.4.min.js"></script> 
<script src="js/swiper/js/swiper.min.js"></script>

HTML

<div id="slide1">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<figure class="swiper-slide"><img src="slide.jpg" alt=""></figure>
			<figure class="swiper-slide"><img src="slide.jpg" alt=""></figure>
			<figure class="swiper-slide"><img src="slide.jpg" alt=""></figure>
		</div>
	</div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

JS

$(function () {
	var slide = new Swiper('.swiper-container', {
		autoplay: {
			delay: 3000,
		},
		speed: 500,
		loop: true,
		slidesPerView: 3,
		spaceBetween: 33,
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
		breakpoints: {
			// 画面幅1100px以下の場合
			1100: {
				slidesPerView: 3,
			},
			// 画面幅800px以下の場合
			800: {
				spaceBetween: 10,
				slidesPerView: 2,
			}
		}
	});
});