Swiper

Dangerous swiper

by Park Mino

HTML

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.7/css/swiper.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.7/js/swiper.jquery.js"></script>
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <!-- Slides -->
  <ul class="swiper-wrapper">
    <li class="swiper-slide"><img src="http://placehold.it/600x450&text=slide+1" alt=""></li>
    <li class="swiper-slide"><img src="http://placehold.it/600x450&text=slide+2" alt=""></li>
    <li class="swiper-slide"><img src="http://placehold.it/600x450&text=slide+3" alt=""></li>
    <li class="swiper-slide"><img src="http://placehold.it/600x450&text=slide+4" alt=""></li>
    <li class="swiper-slide"><img src="http://placehold.it/600x450&text=slide+5" alt=""></li>
    <li class="swiper-slide"><img src="http://placehold.it/600x450&text=slide+6" alt=""></li>
    <li class="swiper-slide"><img src="http://placehold.it/600x450&text=slide+7" alt=""></li>
    <li class="swiper-slide"><img src="http://placehold.it/600x450&text=slide+8" alt=""></li>
  </ul>
  <ul class="swiper-wrapper">
    <li class="swiper-slide"><titl></titl></li>
    <li class="swiper-slide">2</li>
    <li class="swiper-slide">3</li>
    <li class="swiper-slide">4</li>
    <li class="swiper-slide">5</li>
    <li class="swiper-slide">6</li>
    <li class="swiper-slide">7</li>
    <li class="swiper-slide">8</li>
  </ul>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

CSS

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  width: 100%;
}

JavaScript

$(function() {
  var mySwiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    breakpoints: {
      1024: {
        slidesPerView: 4,
        spaceBetween: 40
      },
      768: {
        slidesPerView: 3,
        spaceBetween: 30
      },
      640: {
        slidesPerView: 2,
        spaceBetween: 20
      },
      320: {
        slidesPerView: 1,
        spaceBetween: 10
      }
      sitlkjsdlfkjljk<lkhjsldkfjl;kjsdlfkjlakjdflkjasdflkj
    }
  });
});