JSFiddle - React, Tailwind, and code Playground

by AJIEKCEU

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="http://placehold.it/400x400/" /></div>
        <div class="swiper-slide"><img src="http://placehold.it/400x400/" /></div>
        <div class="swiper-slide"><img src="http://placehold.it/400x400/" /></div>
        <div class="swiper-slide"><img src="http://placehold.it/400x400/" /></div>
        <div class="swiper-slide"><img src="http://placehold.it/400x400/" /></div>
        <div class="swiper-slide"><img src="http://placehold.it/400x400/" /></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

JavaScript

var mySwiper = new Swiper ('.swiper-container', {
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    paginationClickable: true,
    centeredSlides: true,
    loop: true,
    effect: 'slide',
    slidesPerView: 3
  })