① web前端開發小插件之swiper輪播圖
前端開發是現在比較火的一個職業，當然前端工程師的水平也是參差不齊，小編也是其中一員，技術還在努力提高中。在前端開發中經常會遇到要做輪播圖的時候，一般在網站首頁。網上有很多的輪播圖插件，小編要介紹的就是一款跨PC跟移動平台的輪播圖插件——swiper。
② 關於Swiper插件的問題
移除索引為index的slide。例如：
mySwiper.removeSlide(0); //移除第一個
mySwiper.removeSlide([0, 1]); //移除第一個和第二個
mySwiper.removeSlide(index)參數
<script>var mySwiper = new Swiper('.swiper-container',{
})
$('#btn').click(function(){
mySwiper.slideTo(0, 1000, false);//切換到第一個slide，速度為1秒})</script>
③ 如何在一個頁面用多個swiper插件
現在很多前端工程師會被要求寫滑動，swiper就是這樣一款滑動特效插件，面向手機、平板電腦等移動終端。請往下看，一定不會讓你失望（網址見圖）
那麼我們如何在一個頁面中使用多個swiper呢？首先，需要了解如何運用swiper
重點來了，如何在一個頁面用多個swiper，請注意紅色部分，如果明白了，就不用往下看了，如果不明白，請繼續往下看。
swiper是通過共用的class（swiper-container）來實現效果，所以在共用的class前面加上 父元素（你可以定義一個class或id，如此次的.banner、.case）來區分。
改完 var，記得修改下 pagination 值，其他黑色字體部分，根據你的需求設置即可，具體含義請參照swiper官網。
④ 求教手機前端上下滑動翻頁效果，類似swiper插件，但是如果一頁顯示不完時可以滑動查看，應該怎麼做
swiper可以嵌套。
nested 用於嵌套相同方向的swiper時，當切換到子swiper時停止父swiper的切換。
請將子swiper的nested設置為true。
由於需要在slideChangeEnd時判斷作用塊，因此快速滑動時這個選項無效。
<script>
var mySwiper = new Swiper('#swiper-container1')//父swiper
var mySwiper2 = new Swiper('#swiper-container2',{//子swiper
nested:true,
})
</script>
⑤ 在vue里引用swiper插件，怎麼使用
第一步：引入網路雲中的css與js還有jQuery
<link rel="stylesheet" href="css/swiper.min.css">
<script type="text/javascript" async src="js/jQuery.js"></script>
<script type="text/javascript" async src="js/swiper.js"></script>
第二步：點擊在線演示
第三步：選擇自己想要的樣式
第四步：右鍵查看源代碼
5
第五步：把其中body標簽內的全部復制到你的代碼文件中