js(Dom+Bom)第八天—Swiper(插件)

Swiper插件(庫)

01-基本介紹

Swiper 是一款免費以及輕量級的移動設備觸控滑塊的js框架，使用硬件加速過渡（如果該設備支持的話）。主要使用于移動端的網站、移動web apps，native apps和hybrid apps。主要是為IOS而設計的，同時，在Android、WP8系統也有著良好的用戶體驗，Swiper從3.0開始不再全面支持PC端。因此，如需在PC上兼容更多的瀏覽器，可以選擇Swiper2.x（甚至支持IE7）。https://www.swiper.com.cn/

02-基本使用

下載

網頁中引用swiper.min.js和swiper.min.css文件

js文件和css文件都在 package 文件夾中

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/swiper.min.css">
</head>
<body><script type="text/javascript" src="js/swiper.min.js"></script>
</body>
</html>

設置基本的html結構

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/swiper.min.css">
</head>
<body><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">slider1</div><div class="swiper-slide">slider2</div><div class="swiper-slide">slider3</div></div><!--該標簽用來實現分頁效果--><div class="swiper-pagination"></div><!--左箭頭。如果放置在swiper-container外面，需要自定義樣式。--><div class="swiper-button-prev"></div><!--右箭頭。如果放置在swiper-container外面，需要自定義樣式。--><div class="swiper-button-next"></div></div><script type="text/javascript" src="js/swiper.min.js"></script>
</body>
</html>

初始化插件

<script>        var mySwiper = new Swiper('.swiper-container', {autoplay: true,//可選選項，自動滑動})       
</script>

基本配置

direction : 'vertical'    豎向滾動     'horizontal' 橫向滾動
speed: 300ms
loop : true 循環播放  false 不循環
autoplay: true 自動播放 false 不播放//分頁器
//需要在html中添加對應的標簽
pagination: {el: '.swiper-pagination',
},
//上一頁,下一頁
//需要在html中添加對應的標簽
navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',
}

更多操作可以查看API手冊

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/248168.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/248168.shtml
英文地址，請注明出處：http://en.pswp.cn/news/248168.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！