個人swiper初始化
<!DOCTYPE html>
<html lang="en">
<head>css
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./dist/css/swiper.css">
</head>
<body>html
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./banner1.png" alt="">
</div>
<div class="swiper-slide">
<img src="./banner1.png" alt="">
</div>
<div class="swiper-slide">
<img src="./banner1.png" alt="">
</div>
</div>
<!-- 若是須要分頁器（下面的小點點） -->
<div class="swiper-pagination"></div>
<!-- 若是須要導航按鈕 （左右按鈕）-->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</body>
<script src="./jquery-2.0.0.min.js"></script>
<script src="./dist/js/swiper.js"></script>
<script>jquery
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', //輪播方向
autoplay: true, //自動輪播
loop:true, //無限循環
speed: 800,
// 若是須要分頁器
pagination: {
el: '.swiper-pagination',
},
// 若是須要前進後退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 若是須要滾動條
scrollbar: {
el: '.swiper-scrollbar',
},
autoplayDisableOnInteraction: false,
observer: true, //修改swiper本身或子元素時，自動初始化swiper
observeParents: true, //修改swiper的父元素時，自動初始化swiper
})
</script>app
</html>ide
swiper禁止手動滑動
只須要在最外層的容器上增長class="swiper-no-swiping"oop
相關文章
- 1. swiper4初始化/swiper-init/data-swiper
- 2. swiper 從新初始化
- 3. 個人CSS初始化
- 4. Java 初始化的個人理解
- 5. 默認初始化&拷貝初始化&直接初始化&值初始化&列表初始化
- 6. 初始化Direct,顯示個人第一個窗口
- 7. swiper滑動之3D 初始滑塊索引爲第二個
- 8. 初始化器初始化dictionary
- 9. 類初始化與實例初始化
- 10. 類初始化和實例初始化
- 更多相關文章...
- • Web 語義化 - 網站建設指南
- • 第一個MyBatis程序 - MyBatis教程
- • 再有人問你分佈式事務，把這篇扔給他
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章