swiper使用案例一

// 初始化函數
var mySwiper_a = new Swiper('.se3 .left', {
    direction: 'vertical',
    loop: true,
    autoplay: 5000,
    // 回調函數，從一個slide過渡到另外一個slide結束時執行
    onSlideChangeEnd: function(swiper) {
        // 獲取對應的index
        var num = swiper.activeIndex;
        // 給對應的標籤添加樣式 
        $('.se3 .right li').eq(num - 1).addClass('active').siblings().removeClass('active');
    }

});
// 鼠標懸浮對應的標籤切換
$('.se3 .right li').hover(function() {
    // 獲取index
    $(this).addClass('active').siblings().removeClass('active');
    var num = $(this).index() + 1;
    // 雙向控制中的函數 normalizeSlideIndex 不能爲false，默認爲true；
    mySwiper_a.slideTo(num, 1000, false);
});

$mco：#996c33；

.se3{

    .left{
        width: 805px;
        height: 495px;
        float: left;
    }
    .right{
        height: 495px;
        overflow:hidden;
        width: 565px;
        float: right;
        padding: 0;
        list-style: none;
        li{
            width: 100%;
            height: 95px;
            margin-bottom: 5px;
            background: #dcdddd;
            padding-left: 65px;
            padding-top: 15px;
            a{
                color: #333;
                width: 100%;
            }
            &.active{
                background: $mco;
                a{
                    color: #fff;
                }
            }
            &:last-of-type{
                line-height: 65px;
                font-weight: 700;
            }
        }
    }
}