swiper實現臭美app滑動效果

一、臭美app效果：

我的需求是這樣，上面正常滑動，點擊下面的小卡牌，上面的滑動區也隨之切換到當前的點擊態。

二、實現：

css:

主要設置可見區域的幾張卡牌的位置，注意的幾個位置是，中間的激活態和左右兩邊的元素，swiper已經在運行的時候給他們加上了固定的類名。

html:

<!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">女皇
              <p class="card-btn">送給朋友一張</p>
            </div>
            <div class="swiper-slide">世界
                <p class="card-btn">送給朋友一張</p>
            </div>
            <div class="swiper-slide">星星
                <p class="card-btn">送給朋友一張</p>
            </div>
            <div class="swiper-slide">月亮
                <p class="card-btn">送給朋友一張</p>
            </div>
            <div class="swiper-slide">魔術師
                <p class="card-btn">送給朋友一張</p>
            </div>
            <div class="swiper-slide">太陽
                <p class="card-btn">送給朋友一張</p>
            </div>
        </div> 
    </div>

    <div class="contrast-box">
        <ul>
            <li data-index="5">魔術師</li>
            <li data-index="6">太陽</li>
            <li data-index="1">女皇</li>
            <li data-index="2">世界</li>
            <li data-index="3">星星</li>
            <li data-index="4">月亮</li>
            <li class="combin-btn">合成</li>
        </ul>    
    </div>
    <div class="button-next"></div>
    <div class="button-prev"></div>

　　

JavaScript:

var mySwiper = new Swiper('.swiper-container', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        effect: 'coverflow', //3d滑動
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        loop:true,
        slidesPerView: 2,
        coverflow: {
            rotate: 0,  //設置為0
            stretch: 0,
            depth: 200,
            modifier: 2,
            slideShadows : true
        }    
    });

    $('.contrast-box').on('click', 'li:not(.combin-btn)', function(){
        var _index = $(this).data('index') + 1;
        mySwiper.slideTo(_index, 500, false);//切換到第一個slide，速度為1秒
    });

    $('.button-prev').click(function(){
        mySwiper.slidePrev();
    })
    $('.button-next').click(function(){
        mySwiper.slideNext();
    })

要實現愛臭美app的效果，只要對中間active的元素的左右元素設置一點樣式就ok了。

三、vue+swiper

　　使用Vue-awesome-swiper滑動組件可以兼容一些不支持swiper的手機。

四、總結

　　swiper對低版本的ie瀏覽器和某些低端手機支持還是不太好，畢竟swiper使用到一些高級的c3屬性，不過可以從swiper中的實現原理中學到不少干貨。