查看: 1876|回复: 1
打印 上一主题 下一主题

请教一个自动翻页时跳页的问题

[复制链接]
  • TA的每日心情
    郁闷
    2017-9-26 10:54
  • 签到天数: 2 天

    [LV.1]初来乍到

    1

    主题

    3

    帖子

    20

    积分

    新手上路

    Rank: 1

    积分
    20
    跳转到指定楼层
    楼主
    发表于 2017-9-25 17:00:27 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
    请教各位大神一个问题:
    我用的这个demo:
    http://www.swiper.com.cn/demo/23-thumbs-gallery.html加了几个参数,发现页面初始化后,翻页是跳着翻的,就是直接从第一张图跳到了第三张,随便点点之后,又正常了,这个用什么办法解决呀?


    以下是我的代码(翻页的按钮挪了位置,没办法,demo要求的):
    <div class="gallery_box">
                                    <!-- Swiper -->
                                <div class="swiper-container gallery-top">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide slide1" style="background-image:url(res/test_images/1.jpg)"></div>
                                        <div class="swiper-slide slide1" style="background-image:url(res/test_images/2.jpg)"></div>
                                        <div class="swiper-slide slide1" style="background-image:url(res/test_images/3.jpg)"></div>
                                    </div>
                                </div>
                                <div class="gallery-thumbs-box">
                                        <div class="swiper-container gallery-thumbs">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide slide1" style="background-image:url(res/test_images/1.jpg)"></div>
                                                <div class="swiper-slide slide1" style="background-image:url(res/test_images/2.jpg)"></div>
                                                <div class="swiper-slide slide1" style="background-image:url(res/test_images/3.jpg)"></div>
                                                    </div>
                                            <!-- Add Arrows -->
                                            <div class="swiper-button-next"></div>
                                            <div class="swiper-button-prev"></div>
                                        </div>
                                </div>
                            </div>


    var galleryTop = new Swiper('.gallery-top', {
            spaceBetween: 10,
            loop:true,
            loopedSlides: 5, //looped slides should be the same  
            autoplay: 2000  
        });
        var galleryThumbs = new Swiper('.gallery-thumbs', {
                nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 10,
            slidesPerView: 4,
            touchRatio: 0.2,
            loop:true,
            loopedSlides: 5, //looped slides should be the same
            slideToClickedSlide: true,
            autoplay: 2000
        });
        galleryTop.params.control = galleryThumbs;
        galleryThumbs.params.control = galleryTop;



    分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏 分享分享 分享淘帖
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2017-9-28 09:37
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    5

    帖子

    18

    积分

    新手上路

    Rank: 1

    积分
    18
    沙发
    发表于 2017-9-28 09:40:37 | 只看该作者

    这个很不错,谢谢分享
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

    GMT+8, 2024-11-24 08:48 , Processed in 0.076731 second(s), 26 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表