用Swiper实现轮播图

任务描述

本关任务：用Swiper实现一个轮播图。

效果如下：

相关知识

为了完成本关任务，你需要掌握：1.swiper基本的HTMl结构，2.基本功能的实现。

搭建swiper环境

1.下载插件

进入swiper官网 http://www.swiper.com.cn/download/index.html，只需要下载swiper-4.2.2.min.js和swiper-4.2.2.min.css就可以了。

2.引入插件

4. ...
8. ...

3.HTML结构

3. Slide 1
4. Slide 2
5. Slide 3
9.  
13.  

注：

• 这里的HTML结构是固定的，不可以随便更改；

• 这里的类是固定的，外面最大的容器类为swiper-container，放图片的容器类为swiper-wrapper，放图片的类为swiper-slide。

4.你可能想要给Swiper定义一个大小，当然不要也行。

1. .swiper-container {
2. width: 600px;
3. height: 300px;
4. }

5.初始化Swiper：最好是挨着标签

这里简单的介绍一下基本的几个参数：

• direction: 'horizontal'，表示水平滑动，垂直滑动是 direction: vertical。默认是水平滑动；

• loop: true，表示最后一张图片会和第一张图片连起来播放，就像循环播放一样； loop: false，表示最后一张图片是终点；

• autoplay: 3000， 表示自动切换的时间间隔，3000表示3秒；

• speed: 1000， 表示滑动从开始到结束的时间，1000表示1秒；

编程要求

在右侧编辑器中，补全Begin至End中间的部分，按照提示完成代码：

• 补全swiper最大的容器类；

• 补全swiper图片的容器类；

• 开启loop模式，设置图片为循环播放；

• 设置自动切换的时间为1.5秒。

效果如下：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！