里面包括了free模式 、網格分布、切換效果、 觸發條件，點擊。。。

  這里就不一一贅述啦 ，今天就了解一下swiper關于常用的一些參數。

  調用swiper的時候需要進行初始化，然后在里面添加你需要的屬性 。

  現在就來認識下面的屬性：

 滑動方向：橫向（horizontal）/豎向(vertical) ，默認是橫向切換

 滑動速度  speed  單位：ms     指slide從開始到結束的時間

   初始化slide 的索引   initialSlide：數字  設定頁面加載完成時，第幾張圖片先顯示

  循環播放  loop：true/false

  direction : 'vertical',

  是否自動切換：autoplay    true/false  默認不自動切換

  切換效果：effect      -----  常用的slide（位移）  fade （淡入）  cube （方塊）   flip(翻轉)  coverflowEffect(3d流)

  fade效果  為true時   slide透明度1->0（淡出）  0->1（淡入）

  cube 效果  slideShadows ：true/false  是否開啟slide陰影   shadowOffset (投影距離）  單位：px    /shadowScale（投影縮放比例）

  flip效果  它也有陰影參數  和cube一樣  此外還可以限制最大旋轉角度（limitRotation  ）180°  ：true/false    默認是true

  coverflowEffect效果   rotate 旋轉角度 (默認50)  、同樣帶有陰影功能   還有slide的拉伸值（stretch）默認為0  類似間距

  depth是每個slide的位置  這里是以z軸為點默認為100 。

  分頁  pagination  -----  一種是默認的 （半透明） 還有一種自定義的 （上面帶數字）

 前后退鍵  navigation----nextEl以及prevEl

 滾動條   scrollbar

顯示方式slidesPerView：    數字可以自己填寫    表示slide里面顯示個數  

 滑塊之間持續時間  speed    

 每個slide之家的間隙  spaceBetween

 鼠標狀態 grabCursor：true/false

是否可以點擊  clickable:true/false

自動高度  autoHeight ：true/false  根據slide的高度調整

多行布局里每行的slide的數量 slidesPerColumn。

那么如果你想在同一個頁面多次調用swiper，為了避免混亂，建議給每個調用添加父類或者同級再定義一個類。

可以參考一下這篇針對同一頁面swiper的多次調用辦法的文檔http://www.tongyilingma.com/html/show-799.html

相關案例

睢寧縣工商業聯合會

聯合會

聯系我們

CONTACT US

公司電話：0531-68961230 QQ:1828686598

公司地址：濟南市天橋區中凡魯鼎廣場A座20樓2009

高新技術企業編號：GR202137006735

科技中小企業編號：202337010508002562

快捷導航

QUICK NAVIGATION

網站首頁

產品中心

案例展示

資料庫

解決方案

新聞動態

關于文匯

關注我們

FOCUS ON US

咨詢電話：

15628812133

山東文匯信息服務有限公司版權所有 濟南軟件開發 魯ICP備14002804號-1 公安備案號 37010502000882