前言： 本人在项目的工作中负责研发，页面及交互基本都是交给前端去做的。以前前端写的东西大概都知道，都是一些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

*感谢您的阅读。喜欢的、有用的就请大哥大嫂们高抬贵手“推荐一下”吧！你的精神 支持是博主强大的写作动力。欢迎转载！ 
*博主的文章是自己平时开发总结的经验，由于博主的水平不高，不足和错误之处在所难免，希望大家能够批评指出。 
*我的博客： http://www.cnblogs.com/lxhbky/

 作者：深入学习ing

原文链接：https://www.cnblogs.com/lxhbky/p/10494930.html