swiper demo

by avgustre

HTML

<!-- Swiper -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>


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

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

CSS

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* .swiper-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
} */

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: 200px;
  padding: 20px 0;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 2,
  slidesPerColumn: 2,
  spaceBetween: 10,
  loop: true,
  speed: 500,
  autoplay: {
    delay: 1000,
    disableOnInteraction: false,
    stopOnLastSlide: false,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  on: {
  	slideChange: function() {
    var curSlide = swiper.activeIndex;
    var nxtSlide = curSlide + 1;
    	if ( nxtSlide.length === 0) {
      	alert('work');
      }
    }
  }
});