我的swiper初始化

jiezi

6 年前

<!DOCTYPE html>
<html lang=”en”>
<head>

<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>

<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>

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>

</html>

只需要在最外层的容器上增加 class=”swiper-no-swiping”

swiper 禁止手动滑动