swiper實現輪播

時間 2019-11-17

標籤 swiper 實現简体版

原文原文鏈接

1.引入swiper.css 和 swiper.jscss

<!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代碼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中初始化swiperajax

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

4.完成實列代碼以下:api

<!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 文檔app

文檔地址:https://www.swiper.com.cn/api/start/new.htmlide

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。