标签：效果 立足 top log 图片 实现 sde 样式 点击
单个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;
这样 实现的效果点击下面的图片，上面的图片也变化，
反过来 点击上面的图片，下面的小图片也变化。
这个简单的效果 希望可以帮助你们。谢谢~~~
标签：效果 立足 top log 图片 实现 sde 样式 点击
原文地址：http://www.cnblogs.com/u-lhy/p/7071820.html
