JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

<link rel="stylesheet" href="http://www.idangero.us/swiper/dist/css/swiper.min.css">
<script src="http://www.idangero.us/swiper/dist/js/swiper.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="width:100px;">Slide 0</div>
<div class="swiper-slide" style="width:80px;">Slide 1</div>
<div class="swiper-slide" style="width:130px;">Slide 2</div>
<div class="swiper-slide" style="width:80px;">Slide 3</div>
<div class="swiper-slide" style="width:120px;">Slide 4</div>
<div class="swiper-slide" style="width:140px;">Slide 5</div>
<div class="swiper-slide" style="width:90px;">Slide 6</div>
<div class="swiper-slide" style="width:40px;">Slide 7</div>
<div class="swiper-slide" style="width:120px;">Slide 8</div>
<div class="swiper-slide" style="width:110px;">Slide 9</div>
</div>
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>

CSS

.swiper-container {
    width: 100%;
    height: 300px;
}   
.active{
    
    background:red;
}

JavaScript

var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 'auto',
        paginationClickable: true,
        spaceBetween: 30,
        //centeredSlides: true,
    // Navigation arrows
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev'
    });

swiper.slideTo(3,0 , test() );
               
function test(){
    $('.swiper-wrapper .swiper-slide').eq(3).addClass('active');
}
$('.swiper-wrapper .swiper-slide').click(function(){
    $('.swiper-slide').removeClass('active');
	$(this).addClass('active');
    swiper.slideTo( $(this).index() ,600);
});