Educoder html网页综合项目实战 第2关：用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.引入插件

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. ...
  5. <link rel="stylesheet" href="path/to/swiper.min.css">
  6. </head>
  7. <body>
  8. ...
  9. <script src="path/to/swiper.min.js"></script>
  10. </body>
  11. </html>

3.HTML结构

  1. <div class="swiper-container">
  2. <div class="swiper-wrapper">
  3. <div class="swiper-slide">Slide 1</div>
  4. <div class="swiper-slide">Slide 2</div>
  5. <div class="swiper-slide">Slide 3</div>
  6. </div>
  7. <!-- 如果需要分页器（下面的小点点） -->
  8. <div class="swiper-pagination"></div>
  10. <!-- 如果需要导航按钮 （左右按钮）-->
  11. <div class="swiper-button-prev"></div>
  12. <div class="swiper-button-next"></div>
  14. </div>

注：

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

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

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

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

5.初始化Swiper：最好是挨着</body>标签

  1. <script>
  2. var mySwiper = new Swiper ('.swiper-container', {
  3. direction: 'vertical',
  4. loop: true,
  5. autoplay: 3000,
  6. speed: 1000,
  7. // 如果需要分页器
  8. pagination: {
  9. el: '.swiper-pagination',
  10. },
  12. // 如果需要前进后退按钮
  13. navigation: {
  14. nextEl: '.swiper-button-next',
  15. prevEl: '.swiper-button-prev',
  16. },
  18. // 如果需要滚动条
  19. scrollbar: {
  20. el: '.swiper-scrollbar',
  21. },
  22. })
  23. </script>
  24. </body>

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

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

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

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

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

posted @ 2022-05-30 00:03  Q且听风吟  阅读(255)  评论(0)    收藏  举报