个人swiper初始化

时间  2019-12-04
标签 个人 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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程