美文网首页
CSS3 swiper框架

CSS3 swiper框架

作者: 祝名 | 来源:发表于2018-11-27 20:49 被阅读0次

主要用于pc端轮播图,移动端的轮播,滑停效果,h5界面效果

网址:https://www.swiper.com.cn/

一.swiper使用方法(基础配置)

使用方法网址:https://www.swiper.com.cn/usage/index.html


二.swiper自定义配置

1. 配置好swiper的基础内容后,利用API修改配置自己想要的样式
基础配置好后的效果
2.swiper API

三.swiper实现京东轮播图

1. css样式修改,在浏览器中利用控制台找到相应的css选择器,复制覆盖填入属性即可
修改分页器效果
利用after伪元素代替修改结构,产生相应效果

四.swiper实现小米滑动效果




五.swiper animate运动的实现

swiper animate使用方法网址:
https://www.swiper.com.cn/usage/animate/index.html


六.一个页面实现多个分页器

  • 再建立一个swiper模块,换一个class名称即可。之后,给新的swiper初始化css和js
  • 注意,js中class名称要改,方法名称也要改
  • css样式初始化之后,隐藏及分页器功能不准确,要在css中自己补充属性来应用,即overflow:hidden; position:relative;


相关文章

网友评论

      本文标题:CSS3 swiper框架

      本文链接:https://www.haomeiwen.com/subject/pebgqqtx.html