js 使用swiper實現層疊輪播
一.移動端-需求swiper 4.0.3實現層疊輪播
二.實現效果如下
三.方案:查找了下發現使用swiper的切換效果coverflowEffect可以實現
1.coverflow是類似於蘋果將多首歌曲的封面以3D介面的形式顯示出來的方式
2.coverflow的屬性:
rotate:slide做3d旋轉時Y軸的旋轉角度。預設50。
stretch:每個slide之間的拉伸值,越大slide靠得越緊。 預設0。
depth:slide的位置深度。值越大z軸距離越遠,看起來越小。 預設100。
modifier:depth和rotate和stretch的倍率,相當於depth*modifier、rotate*modifier、stretch*modifier,值越大這三個引數的效果越明顯。預設1。
slideShadows:開啟slide陰影。預設 true。
四.程式碼:
this.swiper = new Swiper('.case-swiper-container', { centeredSlides: false, // 選中slide居中顯示 initialSlide: 1, // 預設選中項索引 slidesPerView: 1, // 自動匹配每次顯示的slide個數,loop='auto'模式下,還需要設定loopedSlides effect: 'coverflow', //切換效果-3d coverflowEffect: { rotate: 0, stretch: 10, depth: 160, modifier: 2, slideShadows: true }, pagination: { el: '.swiper-pagination' }, on: { init() { const item = JSON.parse($($(this.$el[0]).find('.swiper-slide')[this.activeIndex]).attr('data-item')); _this.updateCaseInfo(item); }, slideChange() { // 輪播slide同時更新文字描述 const item = JSON.parse($($(this.$el[0]).find('.swiper-slide')[this.activeIndex]).attr('data-item')); _this.updateCaseInfo(item); } } });
5.注意:
5.1若期望選中slide居中顯示,則設定centerSlides:true,若期望在預設顯示輪播時去掉左邊空白,可設定initialSlide:1
5.2不要試圖控制預設選中項的寬高,會影響正常的輪播效果,只能通過調整coverflow的相關屬性和swiper容器的寬高達到最終的效果