现在的位置: 首页 > 方法、技巧 > 正文

图片轮播框架swiper怎么用(转)

2020年01月30日 方法、技巧 ⁄ 共 2725字 ⁄ 字号 暂无评论

艾度哈尼vs德黑兰独立预测 www.qtzii.com.cn 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.www.qtzii.com.cn

使用方法:
1.首先需要在head头部加载插件,需要用到的文件有swiper.css和swiper.js文件??上略豷wiper文件或使用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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

淘宝优惠券

济南网站建设公司
川芎设计

给我留言

留言无头像?