swiper 在网页中常用的方法
1、使用时在页面引入
1 <link rel="stylesheet" href="front/css/swiper.min.css"> 2 <script src="front/js/swiper.jquery.min.js"></script>
2、基本结构
1 <div class="swiper-container"> 2 <div class="swiper-wrapper"> 3 <div class="swiper-slide">slider1</div> 4 <div class="swiper-slide">slider2</div> 5 <div class="swiper-slide">slider3</div> 6 </div> 7 </div> 8 <script> 9 var mySwiper = new Swiper('.swiper-container', { 10 autoplay: 5000,//可选选项,自动滑动 11 }) 12 </script>
基本方法
loop: false, //是否循环 autoplay: 0, //是否自动播放 slidesPerView : 4, //可视区域显示几个 spaceBetween : 10, //可是区域显示的超过一张时,设置之间的距离 // 如果需要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', onlyExternal: true, direction: 'vertical', // 控制上下滚动还是左右滚动
显示都点
<div class="swiper-pagination"></div> pagination : '.swiper-pagination', //都点的样式可查选官方文档
显示左右切换按钮
<div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 修改箭头颜色示范 --> <div class="swiper-button-next swiper-button-white"></div> <!-- 白色 --> <div class="swiper-button-next swiper-button-black"></div> <!-- 黑色 --> <style> /*其他颜色需更改css样式 007aff */ .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); </style>
swiper滑动东特定某一页
mySwiper.slideTo(2, 1000, false);
第一个参数,滑动到特定页码的下标,第二个参数,滑动时间,第三个参数滑动到下表指定页码之后是否触发回调。
3d swiper 地址,包括移动端自适应。