初步認識Swiper_前端交互控制神器_滾動3D切換等特效簡單制作

前言： 本人在項目的工作中負責研發，頁面及交互基本都是交給前端去做的。以前前端寫的東西大概都知道，都是一些JS，CSS和HTML等的一些基本控制，都懂！但是今天前端突然做了一個具有特殊效果的DOM：頁面頂部放了5個包裹元素，包裹可以根據鼠標的拖動產生滾動效果，但是並沒有使用正常的滾動條那種樣式，而且還能默認實現自動動態滾動到第N個包裹的位置顯示？ 這一系列特殊效果的控制，百思不得其解，后來通過一位美女前端了解到，這里面用到了Swiper這個神奇的JS。

不過SwiperJS還在不斷的更新中，在使用過程中可能存在問題，需要關注可能出現的問題，一般沒事哈！！！

 

先看項目里DOM及相關JS吧：

可以看到：Dom中有大量跟Swiper有關的樣式：swiper-container,swiper-wrapper,swiper-slide 一些特殊的標記

Swiper.JS會根據這些標記，控制顯示的元素數量，還可以根據SwiperAPI提供的一些方法如：滾動到默認位置-slideTo()，這些就解決了我之前的所有疑惑

<div class="bs-category-outer dropSortList">
        <div class="swiper-container swiper-container-horizontal order-trackingTips swiper-container-os">
        <ul class="swiper-wrapper">
    #foreach($PACKAGE in $!{ORDER_INFO.OrderTrackPackages})
            <li class="swiper-slide #if($PACKAGE.ExpressNo==$!{CURRENT_EXPRESS_NO})current#end" expressno="$!{PACKAGE.ExpressNo}">
                <a href="javascript:void(0);"><span></span>${velocityCount}</a>
            </li>
    #end
        </ul>
       </div>
</div>

//Swiper初始化，默認顯示4個元素 
var trackingTipsSwiper = new Swiper('.swiper-container-os', {
    slidesPerView: 4,
    observer: true,
    observeParents: true,            
});

//Swiper控制頁面顯示在默認位置
var curSpeed = (speed == undefined) ? 200 : parseInt(speed);
mySwiper.slideTo(currentIndex, curSpeed);

 

總結：附上Swiper學習的網址：前端一定要學習和去了解，幫助是很大的，可以通過簡短的代碼實現出特別好的效果，先簡單介紹到這里吧，以后有機會繼續學習補充...

Swiper中文網站： https://www.swiper.com.cn/

SwiperAPI網站：https://www.swiper.com.cn/api/index.html