JSFiddle - React, Tailwind, and code Playground

Testing Swiper

HTML

<script src="http://dl.dropbox.com/u/41615790/idangerous.swiper-1.8.min.js"></script>
<link rel="stylesheet" href="http://dl.dropbox.com/u/41615790/idangerous.swiper.css">
<div class="swiper-container">
  <div class="swiper-wrapper">
      <div id='slide1' class="swiper-slide">
          <p>Slide 1</p>
      </div>
      <div id='slide2' class="swiper-slide">
        <p>Slide 2</p>
      </div>
      <div id='slide3' class="swiper-slide">
        <p>Slide 3</p>
      </div>
  </div>
</div>
<ul>
    <li class='swiper-pagination-switch active'>Slide 1</li>
    <li class='swiper-pagination-switch'>Slide 2</li>
    <li class='swiper-pagination-switch'>Slide 3</li>
</ul>

CSS

.swiper-container, 
.swiper-slide {
	width: 400px;
	height: 200px;
}
.swiper-slide {
    width:400px;
    height:200px;
    color:white;
    padding-top: 50px;
    text-align:center
}
#slide1 {background-color:#EC098C}
#slide2 {background-color:#00B159}
#slide3 {background-color:#F37735}

ul {
    margin: 1em auto;
    width: 400px;
}

li.swiper-pagination-switch {
    cursor:pointer;
    display:inline-block;
    width:75px;
    border:1px solid #CCC;
    background:#E0DEDE
}
li.swiper-pagination-switch.active {background-color:pink}

JavaScript

$(function(){
	
	//Main Swiper
	swiper = new Swiper('.swiper-container', {
		loop:true,
        onSlideChangeStart: function(){
            $('.swiper-pagination-switch').removeClass('active')
            $('.swiper-pagination-switch').eq(swiper.activeSlide).addClass('active')
        }
	});
    
    //navigation
    $('.swiper-pagination-switch').click(function(){
        swiper.swipeTo($(this).index());
        $('.swiper-pagination-switch').removeClass('active');
		$(this).addClass('active')
    })
    
})