单个 swiper 已经满足不了需求了。
各种花式轮播已经慢慢进入市场。swiper 该如何立足,那么请看。
- class="swiper-container">class="swiper-wrapper">class="swiper-slide">Slide1class="swiper-slide">Slide2class="swiper-slide">Slide3class="swiper-slide">Slide4class="swiper-slide">Slide5class="swiper-slide">Slide6class="swiper-slide">Slide7class="swiper-slide">Slide8class="swiper-slide">Slide9class="swiper-slide">Slide10class="swiper-pagination">class="swiper-button-prev">class="swiper-button-next">
做两个 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;
这样 实现的效果点击下面的图片,上面的图片也变化,
反过来 点击上面的图片,下面的小图片也变化。
这个简单的效果 希望可以帮助你们。谢谢~~~
来源: http://www.cnblogs.com/u-lhy/p/7071820.html