console
$(function(){
var mySwiper = new Swiper('.swiper-container', {
slidesPerView:'auto',
slideToClickedSlide: true,
onTransitionEnd: function(swiper){
$('li').eq(mySwiper.activeIndex).addClass('on').siblings().removeClass('on');
}
})
$('li').click(function(){
$(this).addClass('on').siblings().removeClass('on');
mySwiper.slideTo($(this).index(), 1000)
});
})
<ul>
<li>竖</li>
<li>着</li>
<li>的</li>
</ul>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color: red;">slider1</div>
<div class="swiper-slide" style="background-color: yellow;">slider2</div>
<div class="swiper-slide" style="background-color: green;">slider3</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/3.3.0/css/swiper.min.css"/>
<script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.3.0/js/swiper.min.js"></script>
.swiper-container{
width: 400px;
height: 300px;
}
.swiper-wrapper{
height: 100%;
}
.swiper-slide{
height: 100%;
}
ul,li{list-style:none}
li{
background-color: greenyellow;
}
li.on{
background-color: green;
}