swiper實現臭美app滑動效果

標籤：左右   瀏覽器   func   ras   div   his   not   效果   new   

一、臭美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了。

三、總結

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

swiper實現臭美app滑動效果