日志
swiper的简单使用教程
||
什么是swiper?
Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。
也可以直接使用 npm install swiper --save 在项目种的node-modules 引入
<link rel="stylesheet" href="../package/css/swiper.min.css">
<script src="../package/js/swiper.min.js"></script>
2.html内容
<div class="swiper-container">
<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.js
<script>
var mySwiper = new Swiper('.swiper-container', {
autoplay: true,//可选选项，自动滑动
})
//如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
new Swiper('.swiper-container')
var mySwiper = document.querySelector('.swiper-container').swiper
mySwiper.slideNext();
</script>
恭喜你，现在你的swiper应该已经能正常切换了。
