<head>内に下記を追加
|
1 2 |
<!-- Swiper --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css"> |
</body>の直前に下記を追加
|
1 2 |
<!-- Swiper --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> |
</body>の直前にSwiperの実行scriptを追加
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> var mySwiper = new Swiper ('.swiper-container', { loop: true, autoplay: 4000, speed: 2000, slidesPerView: 2, spaceBetween: 10, centeredSlides : true, pagination: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', breakpoints: { 767: { slidesPerView: 1, spaceBetween: 0 } } }) </script> |
<body>内HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!-- スライダー↓ --> <div class="container mb20"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="画像①" class="img-responsive"></div> <div class="swiper-slide"><img src="画像②" class="img-responsive"></div> <div class="swiper-slide"><img src="画像③" class="img-responsive"></div> <div class="swiper-slide"><img src="画像④" class="img-responsive"></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> <!-- スライダー↑ --> |
コメント