首页 > 代码库 > 如何给两个swiper建立关系
如何给两个swiper建立关系
单个swiper已经满足不了需求了。
各种花式轮播已经慢慢进入市场。swiper该如何立足,那么请看。
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> <div class="swiper-slide">Slide 10</div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div>
做两个swiper轮播,样式视情况自定。
分别为两个swiper轮播做入配置参数,
var galleryTop = new Swiper(‘.gallery-top‘, { nextButton: ‘.swiper-button-next‘, prevButton: ‘.swiper-button-prev‘, spaceBetween: 10, //每个slide 的间距 loop:true, loopedSlides: 5, //looped slides should be the same preventsDefault:false, //干掉默认阻止的事件 observer:true, //初始化子元素 observerParents:true, //初始化父元素 });
为第二个swiper轮播做入配置参数。
var galleryThumbs = new Swiper(‘.gallery-thumbs‘, { spaceBetween: 10, slidesPerView: 6, touchRatio: 0.2, loop:true, loopedSlides: 5, //looped slides should be the same slideToClickedSlide: true, preventsDefault:false, observer:true, observerParents:true, });
关键来了,给两个对象建立连接
galleryTop.params.control = galleryThumbs; galleryThumbs.params.control = galleryTop;
这样 实现的效果点击下面的图片,上面的图片也变化,
反过来 点击上面的图片,下面的小图片也变化。
这个简单的效果 希望可以帮助你们。谢谢~~~
如何给两个swiper建立关系
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。