深圳市网站建设,建材网站建设公司,注册公司网站需要多少钱,电脑 手机网站建站Swiper插件(库)
01-基本介绍
Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架#xff0c;使用硬件加速过渡#xff08;如果该设备支持的话#xff09;。主要使用于移动端的网站、移动web apps#xff0c;native apps和hybrid apps。主要是为IOS而设计的#xff…Swiper插件(库)
01-基本介绍
Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架使用硬件加速过渡如果该设备支持的话。主要使用于移动端的网站、移动web appsnative apps和hybrid apps。主要是为IOS而设计的同时在Android、WP8系统也有着良好的用户体验Swiper从3.0开始不再全面支持PC端。因此如需在PC上兼容更多的浏览器可以选择Swiper2.x甚至支持IE7。https://www.swiper.com.cn/02-基本使用 下载 网页中引用swiper.min.js和swiper.min.css文件 js文件和css文件都在 package 文件夹中!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlelink relstylesheet hrefcss/swiper.min.css
/head
bodyscript typetext/javascript srcjs/swiper.min.js/script
/body
/html设置基本的html结构 !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlelink relstylesheet hrefcss/swiper.min.css
/head
bodydiv classswiper-containerdiv classswiper-wrapperdiv classswiper-slideslider1/divdiv classswiper-slideslider2/divdiv classswiper-slideslider3/div/div!--该标签用来实现分页效果--div classswiper-pagination/div!--左箭头。如果放置在swiper-container外面需要自定义样式。--div classswiper-button-prev/div!--右箭头。如果放置在swiper-container外面需要自定义样式。--div classswiper-button-next/div/divscript typetext/javascript srcjs/swiper.min.js/script
/body
/html初始化插件 script var mySwiper new Swiper(.swiper-container, {autoplay: true,//可选选项自动滑动})
/script基本配置 direction : vertical 竖向滚动 horizontal 横向滚动
speed: 300ms
loop : true 循环播放 false 不循环
autoplay: true 自动播放 false 不播放//分页器
//需要在html中添加对应的标签
pagination: {el: .swiper-pagination,
},
//上一页,下一页
//需要在html中添加对应的标签
navigation: {nextEl: .swiper-button-next,prevEl: .swiper-button-prev,
}更多操作可以查看API手册
