JSFiddle - React, Tailwind, and code Playground

by zunme

HTML

<script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.js"></script>
<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css">
<link rel="stylesheet" href="http://www.idangero.us/sliders/swiper/demos/main-demos/css/idangerous.swiper.css">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide red-slide" style="width:200px;">
<div class="title">Slide 1</div>
</div>
<div class="swiper-slide blue-slide" style="width:150px;">
<div class="title">Slide 2</div>
</div>
<div class="swiper-slide orange-slide" style="width:250px;">
<div class="title">Slide 3</div>
</div>
<div class="swiper-slide blue-slide" style="width:415px;">
<div class="title">Slide 4</div>
</div>
<div class="swiper-slide red-slide" style="width:510px;">
<div class="title">Slide 5</div>
</div>
<div class="swiper-slide green-slide" style="width:375px;">
<div class="title">Slide 6</div>
</div>
</div>
<div class="pagination"></div>
</div>

CSS

body{margin:0;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.5;}
.swiper-container{width:100%;height:100%;color:#fff;text-align:center;}.swiper-slide{height:100%;}.red-slide{background:#ca4040;}.blue-slide{background:#4390ee;}.orange-slide{background:#ff8604;}.green-slide{background:#49a430;}.pink-slide{background:#973e76;}.swiper-slide .title{font-style:italic;font-size:42px;margin-top:80px;margin-bottom:0;line-height:45px;}.pagination{position:absolute;z-index:20;left:10px;bottom:10px;}.swiper-pagination-switch{display:inline-block;width:8px;height:8px;border-radius:8px;background:#222;margin-right:8px;opacity:0.8;border:1px solid #fff;cursor:pointer;}.swiper-visible-switch{background:#aaa;}.swiper-active-switch{background:#fff;}

JavaScript

var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    paginationClickable: true,
    slidesPerView: 'auto'
  });