码迷,mamicode.com
首页 > 其他好文 > 详细

如何给两个swiper建立关系

时间:2017-06-23 23:01:36      阅读:1480      评论:0      收藏:0      [点我收藏+]

标签:效果   立足   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;

这样 实现的效果点击下面的图片,上面的图片也变化,

反过来 点击上面的图片,下面的小图片也变化。

这个简单的效果 希望可以帮助你们。谢谢~~~

如何给两个swiper建立关系

标签:效果   立足   top   log   图片   实现   sde   样式   点击   

原文地址:http://www.cnblogs.com/u-lhy/p/7071820.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!