做网站|网站建设,就上易助科技网

前端技术文档及相关资料下载

关于前端html、css、js等技术上的各种疑难棘手问题的解决方案探讨及相关资料下载!

JS滑动特效插件Swiper
来源:易助科技网浏览量:19收藏

简介

Swiper是纯javript打造的滑动特效插件,面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!


使用

1.  引入Swiper.js和Swiper.css文件


2. HTML

<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
</div>
</div>


3.  调用Swiper

<script>
var mySwiper = new Swiper('.swiper', {
autoplay: true,//可选选项,自动滑动
})

//如果你初始化时没有定义Swiper实例,后面也可以通过Swiper的HTML元素来获取该实例
new Swiper('.swiper')
var mySwiper = document.querySelector('.swiper').swiper
mySwiper.slideNext();
</script>


相关链接

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