swiper 插件使用及问题解决
来源：互联网 发布：大淘客与淘宝联盟 编辑：程序博客网 时间：2024/05/18 01:17
第一次使用swiper，官网的文档什么都没去看，直接用到项目中（移动端的），所以问题也一大堆。主要的几点问题如下：（1）如何在同一页面上使用多个的swiper效果；（2）如何使用tab切换（选项卡效果）； （3）swiper效果的互相嵌套（tab里面嵌套轮播效果）
1、如何在同一页面上使用多个的swiper效果
解决方法：在轮播的最外层如下：
加上一个类名或者id然后根据类名或id来进行初始化就可以了（如果同一页面中几个轮播都一样，那么加个类名就可以了，这样就不用多次的初始化了）如下：<div class="swiper-container" id="banner">//在这边加上类名或者id <div class="swiper-wrapper"> <div class="swiper-slide"><img width="100%" src="images/banner.jpg"></div> <div class="swiper-slide"><img width="100%" src="images/banner.jpg"></div> <div class="swiper-slide"><img width="100%" src="images/banner.jpg"></div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div>初始化：
//swiper图片轮播var swiper = $('#banner').swiper({autoplay:true,speed:2000,loop:true,pagination: '.swiper-pagination',paginationClickable: true,autoplayDisableOnInteraction:false,touchMoveStopPropagation:false /*effect: 'fade'*/ <span style="white-space:pre"></span>});2、如何使用tab切换
解决方法：刚开始在swiper2.x 中看到了个选项卡切换案例，所以就直接copy过来用，没想到一点效果都没有，原来是2.x 和 3.x的方法有些不一样。然后就去官网找了找，哈哈，找到了个slideTo（）方法，该方法可以跳到我们所指定的slide中去。然后把2.x的那个案例改了下，好了选项卡效果可以了。
3、swiper的互相全套（选项卡里面嵌套轮播）
问题：当轮播嵌套进去的时候布局就乱掉了。
解决方法：在tab切换中的slide下要加个div，然后在嵌套相应的轮播和其他内容。起初自己加了个空div，然后轮播就可以用了，但是轮播下面一加上其他的内容时，布局又乱掉了，然后经过一番挣扎，给空div加了个相应的宽度，没想到就正常了。具体代码如下
<div class="tabs tab-btn clearfix"><a href="jsvascript:void(0)" class="tab-btn1 active">aa</a> <a href="jsvascript:void(0)" class="tab-btn2">bb</a></div><div class="main-box"> <div class="swiper-container" id="tab">//选项卡 <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="pro-content">//这边的div是必须的 而且要加上相应的宽度 <div class="pro-img"> <div class="swiper-container pro-banner">//轮播 <div class="swiper-wrapper"> <div class="swiper-slide"><img width="100%" src="images/pro_banner.jpg"></div> <div class="swiper-slide"><img width="100%" src="images/pro_banner2.jpg"></div> <div class="swiper-slide"><img width="100%" src="images/pro_banner.jpg"></div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> </div> <ul class="pro-box clearfix"> <li class="mar-right"> <a href="#"><img width="100%" src="images/product.jpg" ></a> <div class="pro-name"> <h4>给水系类</h4> <p>给水系类给水系</p> </div> </li> <li> <a href="#"><img width="100%" src="images/product.jpg" ></a> <div class="pro-name"> <h4>给水系类</h4> <p>给水系类给水系</p> </div> </li> <li class="mar-right"> <a href="#"><img width="100%" src="images/product.jpg" ></a> <div class="pro-name"> <h4>给水系类</h4> <p>给水系类给水系</p> </div> </li> <li> <a href="#"><img width="100%" src="images/product.jpg" ></a> <div class="pro-name"> <h4>给水系类</h4> <p>给水系类给水系</p> </div> </li> </ul> </div> </div> <div class="swiper-slide"> <div class="pro-content"> <div class="pro-img"> <div class="swiper-container pro-banner"> <div class="swiper-wrapper"> <div class="swiper-slide"><img width="100%" src="images/pro_banner2.jpg"></div> <div class="swiper-slide"><img width="100%" src="images/pro_banner.jpg"></div> <div class="swiper-slide"><img width="100%" src="images/pro_banner2.jpg"></div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> </div> <ul class="pro-box clearfix"> <li class="mar-right"> <a href="#"><img width="100%" src="images/product.jpg" ></a> <div class="pro-name"> <h4>给水系类2</h4> <p>给水系类给水系</p> </div> </li> <li> <a href="#"><img width="100%" src="images/product.jpg" ></a> <div class="pro-name"> <h4>给水系类2</h4> <p>给水系类给水系</p> </div> </li> <li class="mar-right"> <a href="#"><img width="100%" src="images/product.jpg" ></a> <div class="pro-name"> <h4>给水系类2</h4> <p>给水系类给水系</p> </div> </li> <li> <a href="#"><img width="100%" src="images/product.jpg" ></a> <div class="pro-name"> <h4>给水系类2</h4> <p>给水系类给水系</p> </div> </li> </ul> </div> </div> </div> </div></div>//产品图片轮播var swiper = $('.pro-banner').swiper({autoplay:true,speed:2500,loop:true,pagination: '.swiper-pagination',paginationClickable: true,autoplayDisableOnInteraction:false,touchMoveStopPropagation:false, effect: 'fade' });//tab切换var tabsSwiper = $('#tab').swiper({//autoplay:true,onlyExternal : true,speed:2000 }) $(".tabs a").on('touchstart mousedown',function(e){e.preventDefault();$(".tabs .active").removeClass('active');$(this).addClass('active');tabsSwiper.slideTo($(this).index(),1000,false); }) $(".tabs a").click(function(e){e.preventDefault(); });html, body {<span style="white-space:pre"></span>position: relative;<span style="white-space:pre"></span>height: 100%;}.swiper-container {<span style="white-space:pre"></span>width: 100%;<span style="white-space:pre"></span>height: 100%;}.swiper-slide {<span style="white-space:pre"></span>text-align: center;<span style="white-space:pre"></span>font-size: 18px;<span style="white-space:pre"></span>background: #fff;<span style="white-space:pre"></span>/* Center slide text vertically */<span style="white-space:pre"></span>display: -webkit-box;<span style="white-space:pre"></span>display: -ms-flexbox;<span style="white-space:pre"></span>display: -webkit-flex;<span style="white-space:pre"></span>display: flex;<span style="white-space:pre"></span>-webkit-box-pack: center;<span style="white-space:pre"></span>-ms-flex-pack: center;<span style="white-space:pre"></span>-webkit-justify-content: center;<span style="white-space:pre"></span>justify-content: center;<span style="white-space:pre"></span>-webkit-box-align: center;<span style="white-space:pre"></span>-ms-flex-align: center;<span style="white-space:pre"></span>-webkit-align-items: center;<span style="white-space:pre"></span>align-items: center;}/*== product ==*/.tab-btn{width:95%; height:.6rem; margin:.2rem auto .12rem;}.tab-btn1{width:49.8%; height:.6rem; line-height:.6rem; text-align:center; font-size:.28rem; color:#fff; background-color:#f37f39; opacity:.6; border-radius:3px 0 0 3px; float:left}.tab-btn2{width:49.8%; height:.6rem; line-height:.6rem; text-align:center; font-size:.28rem; color:#fff; background-color:#f37f39; opacity:.6; border-radius:0 3px 3px 0; float:right}.tabs a.active{opacity:1}.pro-img{width:100%; height:3.5rem; overflow:hidden;}.pro-box{width:100%; margin-top:.22rem}.pro-box li{width:48%; border:1px solid #e6e6e6; margin-bottom:.18rem; position:relative; float:left}.pro-box li.mar-right{margin-right:2%;}.pro-box li a{display:block; width:100%; height:2.71rem}.pro-name{width:100%; background:rgba(0,0,0,0.4); text-indent:.1rem; overflow:hidden; position:absolute; left:0; bottom:0}.pro-name h4{font-size:.24rem; text-align:left; font-weight:normal; color:#fff}.pro-name p{font-size:.2rem; text-align:left; color:#fff}.pro-content{width:100%; background:#fff}
虽然到最后还是没找到是什么原因引起的，但问题总算是解决了
0 0
- swiper 插件使用及问题解决
- swiper.js插件使用
- 如何使用插件 Swiper
- vue轮播图插件vue-awesome-swiper的引入及使用
- JS插件swiper的使用
- swiper插件
- Swiper 插件
- swiper插件
- swiper插件
- js滑动特效插件Swiper使用心得
- 使用vue-awesome-swiper滑块插件
- 使用vue-awesome-swiper滑块插件
- angular2——使用swiper插件
- Swiper使用
- swiper使用
- 使用swiper插件过程中遇到的问题
- 使用angular和swiper做的一个滑动小插件
- 解决vue中使用swiper插件——李帅醒博客
- SSH案例----员工管理系统
- iOS动手做一个直播(代码篇)
- 千万级pv高性能高并发网站架构
- React生命周期图示
- Get两大主流简历模版
- swiper 插件使用及问题解决
- （第1讲）jsp简介
- HTML&CSS基础学习笔记1.29-灵活地使用样式
- 8个CSS函数的小技巧
- Java网络编程
- 恶意软件RIPPER解析——其如何盗取ATM机的巨额泰铢？
- Linux进程间通信——使用共享内存
- Memcache和redis的区别是什么?
- 为边框应用图片 border-image
