首页 > 建站百科 > 移动开发 > swiper多个特效怎么在同一页面上使用(西安网站建设)

swiper多个特效怎么在同一页面上使用(西安网站建设)

时间:2015-07-31 10:17:04 来源:西安网站建设
最近给公司开发手机端网站,发现一个很厉害的插件swiper,这个插件可以做出很多漂亮的滑动的图片效果,暂时在使用的时候我发现所有的特效样式都是一样的。用的是相同的class swiper-container和swiper-pagination,怎么将他们分来呢?我中间换了类名,但是出不来效果,最后我换成这样的,请注意红色的部分:
$(function(){
 var mySwiper = $('.banner .swiper-container').swiper({
mode:'horizontal',
loop: true,
autoResize:true,
pagination:'.banner .swiper-pagination',
paginationClickable :true,
autoplay : 3000,
 });
 
 var swiper = $('.case .swiper-container').swiper({
  pagination: '.case .swiper-pagination',
slidesPerView: 4,
slidesPerColumn: 2,
paginationClickable: true,
spaceBetween: 20
 });
})   

最终出来了效果,



获取他们共用的class的时候加上父元素区分开。
写style的时候.swiper-container和.swiper-paginatio是共用的不要写在里面新建class区分写改变它们不同的样式。
关注“企尚网络(西安网站建设)”,你将可以获得更多的特效问题的应用。

阅读过此文章的读者,还阅读过下面的文章

2015-07-31 10:17:04      西安网站建设之新网站如何正确的做好SEO优化
2015-07-31 10:17:04      西安网站建设总结新内容创业的五个方法论
2015-07-31 10:17:04      微信公众平台数据接口正式对所有认证公众号开放
2015-07-31 10:17:04      百度眼中的优质移动站点什么样
2015-07-31 10:17:04      微信公众平台接口测试账号更新
2015-07-31 10:17:04      网站建设中移动网站有哪些优势?
2015-07-31 10:17:04      客服接口升级,增加自定义头像和昵称能力
2015-07-31 10:17:04      听说百度要搞原创保护了,你怎么看这件事情?
2015-07-31 10:17:04      新站迟迟未收录原因,是不是这些原因影响了你呢?
2015-07-31 10:17:04       放大镜js插件magiczoomplus去版权
2015-07-31 10:17:04      网站建设丨良好的视觉感受,简洁的用户界面
2015-07-31 10:17:04      2015年影响谷歌搜索引擎排名的因素调查