Swiper.jsの基本的な使い方

本家サイト
読み込み
<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, } } }); });