swiper实现轮播

最新推荐文章于 2024-04-10 16:37:19 发布

cigu9928

最新推荐文章于 2024-04-10 16:37:19 发布

阅读量152

点赞数

原文链接：https://my.oschina.net/u/3223370/blog/3074161

版权

1.引入swiper.css 和 swiper.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
</head>
	<body>
        
	</body>
</html>

2.编写轮播图的html代码

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/banner1.png"/></div>
        <div class="swiper-slide"><img src="img/banner2.png"/></div>
        <div class="swiper-slide"><img src="img/banner3.png"/></div>
    </div>
    <div class="swiper-pagination"></div>
</div>

3.在js中初始化swiper

<script>
var mySwiper = new Swiper ('.swiper-container', {
    direction:'horizontal',// 排布方式 horizontal:水平方向
    loop: true,
    autoplay:true,
    speed:2000,
    pagination: {
        el: '.swiper-pagination',
        clickable :true,//是否启用分页点击
    }
});
</script>

4.完成实列代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
    <style>
        .swiper-container{
            width: 100%;
            max-width: 1190px;
        }    
        .swiper-slide{
            width: 100%;
        }
        .swiper-slide img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/banner1.png"/></div>
        <div class="swiper-slide"><img src="img/banner2.png"/></div>
        <div class="swiper-slide"><img src="img/banner3.png"/></div>
    </div>
    <div class="swiper-pagination"></div>
</div>
</body>
<script>
    var mySwiper = new Swiper ('.swiper-container', {
        direction:'horizontal',// 排布方式 horizontal:水平方向
        loop: true,
        autoplay:true,
        speed:2000,
        pagination: {
            el: '.swiper-pagination',
            clickable :true,//是否启用分页点击
        }
    });
</script>
</html>

5.更多功能查询swiper API 文档

文档地址:https://www.swiper.com.cn/api/start/new.html

转载于:https://my.oschina.net/u/3223370/blog/3074161