查看: 16951|回复: 22
打印 上一主题 下一主题

多个swiper间切换,隐藏后再显示不会触发自动播放

[复制链接]
  • TA的每日心情
    奋斗
    2016-5-24 09:08
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    1

    主题

    10

    帖子

    166

    积分

    注册会员

    Rank: 2

    积分
    166
    跳转到指定楼层
    楼主
    发表于 2016-5-17 10:33:45 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
    多个swiper间切换,swiper-container隐藏后再显示不会触发自动播放,必须手势滑动一次,才能被触发自动播放,怎么解决
    autoplay: 3000,
    speed: 500,
    loop: true,
    observer:true,
    observeParents:true,
    autoplayDisableOnInteraction : false,
    分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏 分享分享 分享淘帖
    回复

    使用道具 举报

  • TA的每日心情
    郁闷
    2018-8-20 10:51
  • 签到天数: 5 天

    [LV.2]偶尔看看I

    3

    主题

    54

    帖子

    339

    积分

    中级会员

    Rank: 3Rank: 3

    积分
    339
    沙发
    发表于 2016-5-18 10:58:49 | 只看该作者
    重置 初始化,靠JS实现了,
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    2016-5-24 09:08
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    1

    主题

    10

    帖子

    166

    积分

    注册会员

    Rank: 2

    积分
    166
    板凳
     楼主| 发表于 2016-5-19 09:36:43 | 只看该作者
    observer:true,
    observeParents:true,
    的作用不是当swiper隐藏/显示,自动初始化swiper的作用吗?
    js怎么实现?能讲讲原理吗?
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    郁闷
    2018-8-20 10:51
  • 签到天数: 5 天

    [LV.2]偶尔看看I

    3

    主题

    54

    帖子

    339

    积分

    中级会员

    Rank: 3Rank: 3

    积分
    339
    地板
    发表于 2016-5-19 11:31:10 | 只看该作者
    不知道你那怎么写的,需要看代码才清楚。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    2016-5-24 09:08
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    1

    主题

    10

    帖子

    166

    积分

    注册会员

    Rank: 2

    积分
    166
    5#
     楼主| 发表于 2016-5-19 13:56:27 | 只看该作者
    能加qq聊一聊吗
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    2016-5-24 09:08
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    1

    主题

    10

    帖子

    166

    积分

    注册会员

    Rank: 2

    积分
    166
    6#
     楼主| 发表于 2016-5-19 13:59:12 | 只看该作者
    <script type="text/javascript">
    $(document).ready(function() {
            var swiper = new Swiper('#swiper-container1', {
            pagination: '#swiper-container1 .swiper-pagination',
            paginationClickable: true,
                    autoplay: 1500,
                    loop: true,
                    autoplayDisableOnInteraction : false,
                    observer:true,
                    observeParents:true
        });
            var myswiper = new Swiper('#swiper-container2', {
            pagination: '#swiper-container2 .swiper-pagination',
            paginationClickable: true,
                    autoplay: 1500,
                    loop: true,
                    autoplayDisableOnInteraction : false,
                    observer:true,
                    observeParents:true
        });
            $('nav span').click(function(){
              var index = $(this).index();
              $('nav span').eq(index).addClass('cur_n').siblings().removeClass('cur_n');
              $('ul li').eq(index).show().siblings().hide();
              if($(this).index() == 0){
                    swiper.slideTo(1);
                    swiper.startAutoplay();
              }else{
                    myswiper.slideTo(1);
                    myswiper.startAutoplay();
              }
            });
    });
    </script>
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    2016-5-24 09:08
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    1

    主题

    10

    帖子

    166

    积分

    注册会员

    Rank: 2

    积分
    166
    7#
     楼主| 发表于 2016-5-19 13:59:34 | 只看该作者
    <body>
    <nav>
            <span class="cur_n">产品详情</span>
        <span>公司介绍</span>
    </nav>
    <ul>
      <li>
              <h5>产品详情</h5>
        <div class="swiper-container" id="swiper-container1">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="Swiper-3.3.1/demos/img/1.png"/></div>
                <div class="swiper-slide"><img src="Swiper-3.3.1/demos/img/2.png"/></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
      </li>
      <li style="display:none;">
              <h5>公司介绍</h5>
        <div class="swiper-container" id="swiper-container2">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="Swiper-3.3.1/demos/img/3.png"/></div>
                <div class="swiper-slide"><img src="Swiper-3.3.1/demos/img/4.png"/></div>
                <div class="swiper-slide"><img src="Swiper-3.3.1/demos/img/5.png"/></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
      </li>
    </ul>
    </body>
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    2016-5-24 09:08
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    1

    主题

    10

    帖子

    166

    积分

    注册会员

    Rank: 2

    积分
    166
    8#
     楼主| 发表于 2016-5-19 14:01:53 | 只看该作者
    代码如上 就是切换的时候 切换到第二个的时候 第二个里面的swiper就不自动轮播了 需要手动划一下 才会开始自动播放
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2016-5-20 10:21
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    7

    帖子

    17

    积分

    新手上路

    Rank: 1

    积分
    17
    9#
    发表于 2016-5-20 10:24:03 | 只看该作者
    不是吧!不是吧!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    2016-5-24 09:08
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    1

    主题

    10

    帖子

    166

    积分

    注册会员

    Rank: 2

    积分
    166
    10#
     楼主| 发表于 2016-5-23 16:02:36 | 只看该作者
    各位大神没有遇到这种情况的吗
    回复 支持 反对

    使用道具 举报

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

    本版积分规则

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

    GMT+8, 2024-11-24 02:32 , Processed in 0.063826 second(s), 30 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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