Swiper.jsの基本的な使い方
本家サイト
読み込み
|
1 2 3 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
$(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, } } }); }); |
