六合彩平特肖|平特肖公式数据
現在的位置: 首頁 > 方法、技巧 > 正文

圖片輪播框架swiper怎么用(轉)

2020年01月30日 方法、技巧 ⁄ 共 2725字 ⁄ 字號 暫無評論

swiper是一款免費以及輕量級輪播滑動的js框架,適用于PC端跟移動端,官方地址:(https://www.swiper.com.cn/)

效果演示:

PC端

移動端(在瀏覽器將設備切換為手機,這里切換為iphone),swiper支持移動端觸控左右滑動

代碼部分(復制粘貼可直接使用):

<!DOCTYPE html>
<html>
<head>
<title>Swiper.js簡單快速實現輪播滑動(兼容PC端、移動端)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />

<!-- 下面加載Swiper的css跟js文件。可以將文件下載到項目中加載,也可以通過cdn遠程加載,這里使用的是cdn遠程加載 -->
<link rel="stylesheet" ><!-- 加載Swiper的css文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.js"></script><!-- 加載Swiper的js文件 -->
</head>
<body>
    <div style="height: 200px;" class="swiper-container">
        <div class="swiper-wrapper">
            <!-- 下面是4個不同顏色的輪播滑塊 -->
            <div style="background-color: red;" class="swiper-slide">slider1</div>
            <div style="background-color: green;" class="swiper-slide">slider2</div>
            <div style="background-color: yellow;" class="swiper-slide">slider3</div>
            <div style="background-color: blue;" class="swiper-slide">slider4</div>
        </div>
        <div class="swiper-button-prev"></div><!--左箭頭-->
        <div class="swiper-button-next"></div><!--右箭頭-->
        <div class="swiper-pagination"></div><!--分頁器(就是4個點點)-->
    </div>
</body>
</html>
<script>
var mySwiper = new Swiper('.swiper-container', {//初始化Swiper
    autoplay: {//自動切換
       delay: 3000,
       stopOnLastSlide: false,
       disableOnInteraction: false,
     },
    navigation: {//前進后退
       nextEl: '.swiper-button-next',
       prevEl: '.swiper-button-prev',
     },
    pagination: {//分頁器
       el: '.swiper-pagination',
       clickable :true,
    },
    loop : true,//循環
})
</script>

演示站點:http://lunbo.renrensousuo.com

使用方法:
1.首先需要在head頭部加載插件,需要用到的文件有swiper.css和swiper.js文件。可下載swiper文件或使用CDN遠程加載

<head>
<!-- 這里使用的是cdn遠程加載Swiper4的版本 -->
<link rel="stylesheet" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.js"></script>
</head>

swiper4文件下載地址:https://www.swiper.com.cn/download/index.html

swiper4遠程CDN加載地址:https://www.swiper.com.cn/cdn/index.html

2.HTML內容

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">slider1</div>
        <div class="swiper-slide">slider2</div>
        <div class="swiper-slide">slider3</div>
        <div class="swiper-slide">slider4</div>
    </div>
</div>

上面的HTML內容是固定模板,如果需要添加左右箭頭或者分頁器等其他組件可以參考swiper4的官方文檔:https://www.swiper.com.cn/api/index.html

3.初始化Swiper

<script>
    var mySwiper = new Swiper('.swiper-container', {
      autoplay:true,//等同于以下設置
      /*autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
        },*/
    });
</script>

在js中如果需要添加其他配置選項可以參考swiper4的官方文檔:
https://www.swiper.com.cn/api/index.html

結語:
在實際的web開發中,總是需要兼容PC跟移動端,如果使用原生js自己寫的話,不僅耗時,可能兼容性、穩定性也不好,特別是移動端的touch觸控事件。使用swiper便不用考慮到兼容這些事,只要熟悉它的API,便可快速實現手機,電腦網頁大部分滑動,焦點圖、tab、觸摸導航等功能。

作者:代碼西施
鏈接:https://www.jianshu.com/p/e000482c4f70
來源:簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

濟南網站建設公司
川芎設計

給我留言

留言無頭像?

六合彩平特肖 盛鑫配资 广西快乐十分20选5个中4个 贵州遵义麻将 明星三缺一安卓单机 湖北快三历史开奖查询 贵阳捉鸡麻将怎么打初学图解 安徽快三开奖结果查询 六场半全场技巧 黑龙江彩6十1开奖结果 彩虹快乐时时彩计划软件