SOURCE

console 命令行工具 X clear

                    
>
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;
}