Bootstrap3に「Swiperスライダー」

<head>内に下記を追加

<!-- Swiper -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">

</body>の直前に下記を追加

<!-- Swiper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>

</body>の直前にSwiperの実行scriptを追加

<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

<!-- スライダー↓ --> 
<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>
<!-- スライダー↑ --> 

 

 

コメント

タイトルとURLをコピーしました