JSFiddle - React, Tailwind, and code Playground

by pawangupta18

HTML

<script src="https://rawgit.com/nolimits4web/Swiper/master/dist/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/nolimits4web/Swiper/master/dist/css/swiper.min.css">

 <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="http://lorempixel.com/600/600/nature/1"/></div>
      <div class="swiper-slide"><img src="http://lorempixel.com/600/600/nature/2"/></div>
      <div class="swiper-slide"><img src="http://lorempixel.com/600/600/nature/3"/></div>
      <div class="swiper-slide"><img src="http://lorempixel.com/600/600/nature/4"/></div>
      <div class="swiper-slide"><img src="http://lorempixel.com/600/600/nature/5"/></div>
      </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    
    
         <!-- Add Arrows -->
    <div class="swiper-button-next">
      
      <svg height="32px" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Layer_1"/><g id="arrow_x5F_right_x5F_alt1"><path d="M16,0C7.164,0,0,7.164,0,16s7.164,16,16,16s16-7.164,16-16S24.836,0,16,0z M16.031,24v-6H8v-4h8.031   V8.031L24,16L16.031,24z" style="fill:#fd9f00;"/></g></svg>
    </div>
    <div class="swiper-button-prev">
      <svg height="32px" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Layer_1"/><g id="arrow_x5F_left_x5F_alt1"><path d="M16,32c8.836,0,16-7.164,16-15.998C32,7.164,24.836,0,16,0S0,7.164,0,16.002   C0,24.836,7.164,32,16,32z M15.969,8v6.002H24V18h-8.031v5.969L8,16.002L15.969,8z" style="fill:#fd9f00;"/></g></svg>
    </div> 
    
  </div>

CSS

html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #fff;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 300px;
      height: 300px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -150px;
      margin-top: -150px;
    }
    .swiper-slide {
      background-position: center;
      background-size: cover;
    }

.cube-slider{ width: 200px; height: auto; float: left}


.swiper-slide img{ float: left; width: 100%; height: auto;}

 
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{background-image:none; }
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{background-image:none; }
.swiper-pagination-bullet-active {
    opacity: 1;
    background: #fd9f00;
}

JavaScript

var swiper = new Swiper('.swiper-container', {
      effect: 'cube',
      grabCursor: true,
     speed: 400,
     loop: true,
    autoplay: {
    delay: 2000,
  },
      cubeEffect: {
        shadow: true,
        slideShadows: true,
        shadowOffset: 20,
        shadowScale: 0.94,
      },
    
    pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },
    navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
    
    });