1. 我覺得最難的就是改外掛啦，看得懂還好，看不懂只能硬啃了，不過過程還是蠻享受的，畢竟對前端弱雞來說是get了一個技能點。

2.首先swiper輪滑元件是有很多詳細的官網api的，其實有些細節問題一旦爆發出來也是在api裡一頓苦找。

   那麼言歸正傳，多組輪滑swiper同時出現時，會有一個初始化問題，當你宣告的swiper物件僅為一個時，那麼多組輪滑樣式就開始各種報錯啦

  譬如：左右兩邊的滑動根本不受width控制，無限延伸，或是點選分頁圖示無效等。

var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 1,
        paginationClickable: true,
        spaceBetween: 0,
        loop: true
    });
 

在多組此種輪滑效果出現時，你需要加兩個屬性值，即

 observer:true,
 observeParents:true

3.那麼有人問了，如果是要求輪滑效果中的其中一組的slide高度不同於其他組怎麼辦？其實都是初始化物件的問題，此時需要重新定義一個swiper物件來進行區別，

你可以重新賦值css來達成樣式效果，這個new的新物件程式碼即是：

var swiper1 = new Swiper('.swiper-container1', {
	        pagination: '.swiper-pagination1',
	        slidesPerView: 1,
	        paginationClickable: true,
	        spaceBetween: 0,
	        loop: true,
	        observer:true,
	        observeParents:true
	    });
var swiper = new Swiper('.swiper-container', {
	        pagination: '.swiper-pagination',
	        slidesPerView: 2.25,
	        paginationClickable: true,
	        spaceBetween: 18,
	        freeMode: true,//此處新增兩句：在修改Swiper樣式時，自動初始化swiper 
	        observer:true,
	        observeParents:true
	    });	 
 

4.具體的屬性值及意義可以參考官網api

http://www.swiper.com.cn/api/start/2014/1218/140.html

5.覺得有了幫助了，請點贊請關注吧。

有需要swiper的css和js可以評論後發哦。