Swipe轮播插件的使用

最新推荐文章于 2024-05-01 12:48:13 发布

AuroraJim

最新推荐文章于 2024-05-01 12:48:13 发布

阅读量935

点赞数 1

分类专栏： Web前端大合集文章标签： css html5 js

本文链接：https://blog.csdn.net/qq_45835014/article/details/120645158

版权

Web前端大合集专栏收录该内容

16 篇文章 2 订阅

订阅专栏

Swiper轮播插件的使用

一、入门Swiper插件
二、快速学习Swiper API
- 2.1 Swiper初始化
三、常用Swiper API（可以说就是配置选项）
四、特别提醒
- 以上内容只是用于自己学习，如有错误，还请大家指出错误，共同进步。

一、入门Swiper插件

1.1 swiper插件的下载

访问Swiper官网
点击获取Swiper，下载Swiper插件
解压，提取自己想要的文件css、js文件
依次进入 dist—>css–>将swiper.css文件复制到自己的项目中；再次进入dist—>js—>将swiper.js文件复制到自己的项目中
说明：dist中有swiper.css文件和swiper.min.css文件，两者都可以，唯一的区别是min.css文件是经过压缩的，占用空间少，但是源码一行显示，不利于阅读学习;js文件也是一样的。

1.2 swiper插件的具体应用

使用步骤：

新建html文件
1. 分别将swiper.css文件和js文件引入（建议将js文件放到body结束标签后引入

将基本的轮播模板写好（特别注意：原有类名不要去改哦，改了会失效，可以自己在后面定义id）

<body>
    <div class="swiper-container" id="boss">
        <div class="swiper-wrapper">
            <div class="swiper-slide" id="swiper_one">图片①</div>
            <div class="swiper-slide" id="swiper_two">图片②</div>
            <div class="swiper-slide" id="swiper_three">图片③</div>
        </div>
    </div>
</body>

书写js代码，实例化一个swiper对象；单独的js文件中，最好使用window.onload = function(){ }方法）

window.onload =function(){代码 }

<script src="./swiper.js"></script>
<script>
    //实例化一个swiper
    var mySwiper = new Swiper('#boss', {
        autoplay: 3000,
        initialSlide:1,
    });
</script>

二、快速学习Swiper API

2.1 Swiper初始化

初始化的基本语法
```
new Swiper（SwiperContainer，parameter）
```
参数说明：
- SwiperContainer：容器选择器，也就是上图的40行的class或者是id的值（例如下图：#boss）
  - parameter：（可选）配置选项 ---->注意：以后和花括号打交道打的多，因为基本上的功能都要在里面声明使用；写完一対属性记得用逗号分隔

三、常用Swiper API（可以说就是配置选项）

3.1 Basic一般选项

属性	返回值	说明	个人解释
initialSlide	number	设置初始化的slide索引	轮播图第一张要显示的图片
direction	string	滑动的方向（水平horizontal 垂直vertical)）	左右（水平）滑动上下（垂直）滑动
autoplay	number	自动播放的单位ms	不写这个不会自己播放
autoplayDisableOnInteraction	boolean	用户操作swiper之后，是否禁止autoplay。默认为true：停止	自己用鼠标滑动了图片，就不会自动播放了
grabCursor	boolean	设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状	鼠标放入变成小手样式

3.2 Free Mode（抵抗反弹）

属性	说明	个人解释
freeMode	默认false 值滑动一个	手动滑动时，可以把两图交界显示

3.3 Effect切换效果

属性	属性值
effect	默认slide、fade淡入、cube方块、coverflow 3d流、flip 3d翻转

3.4 Click点击

属性	说明
preventClicks	当swiper在触摸时阻止默认事件（preventDefault），用于防止触摸时触发链接跳转

3.5 pagination 分页器

属性	属性值
pagination	默认null
paginationType	bullets圆点、fraction分式、progress进度条、custom自定义
paginationClickable	此默认为true，点击分页器可切换到对应图片

3.6 Loop 环路

属性	属性值	说明
loop	默认faslse	设置true能够让图片看起来连贯播放

四、特别提醒

以上内容只是用于自己学习，如有错误，还请大家指出错误，共同进步。

🙋更详细的内容请访问官网

AuroraJim

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Swipe轮播插件的使用

Swiper轮播插件的使用一、入门Swiper插件1.1 swiper插件的下载1.2 swiper插件的具体应用使用步骤：二、快速学习Swiper API2.1 Swiper初始化三、常用Swiper API（可以说就是配置选项）3.1 Basic一般选项3.2 Free Mode（抵抗反弹）3.3 Effect切换效果3.4 Click点击3.5 pagination 分页器3.6 Loop 环路四、特别提醒以上内容只是用于自己学习，如有错误，还请大家指出错误，共同进步。一、入门Swiper插件1
复制链接

扫一扫

专栏目录