swiper轮播图

一.Swiper:

  • swiper是一款轻量级的轮播图插件,不仅支持pc端更是为移动端而生,用它可以快速地做出一个轮播图,或者扩展使其做出复杂的轮播效果。
  • swiper使用需要两个文件,一个是swiper.css,里面规定了一些在这个滑动轮播插件中常用的样式;另外一个是swiper.js这个是插件的主体部分。
  • 这些文件可以在官网查找获取方法
  • swiper-wrapper是一个按照一定顺序排列的所有轮播图的集合,在默认情况下是左右排列,当鼠标或者触屏进行操作的时候,改变的是这个元素的位置,而达到轮播的效果

二.swiper有很多版本,不同版本使用方式会有所差距。下面是简单的swiper使用。

jQuery代码部分

 swiper轮播图

 

 swiper轮播图

 

 

HTML页面:

swiper轮播图

 

上一篇:vue3+swiper4.5.1


下一篇:HTML/CSS(笔记4)