jQuery SlideJS

Question

我在不同的 jQuery 选项卡中有许多 jQuery SlidesJS。效果很好。我现在的问题是，当我用 slide2 单击 tab2 时，我将用 slide1 返回到 tab1 ，我想在 1 处重新启动 slide1!我的代码是:

<script>
    function start(_start) {
        if(_start != "") {
            starter = _start;
        } else {
            starter = 1;
        }
        $('#slides1, #slides2, #slides3').slides({
            start: starter,
            preload: true,
            slideSpeed: 1000,
            play: 4000,
            pause: 2000,
            slideEasing: 'easeInOutQuint',
            generateNextPrev: false,
            pagination: false,
            next: 'next',
            prev: 'prev'
        });
        $("#tabs").tabs();              
    }

    $(document).ready(function() {
        start(1);

        $("#ui-id-1").click(function(){
            start(1);
        });         
    });
</script>   

#ui-id-1 是 tab1。单击它应该从 1 开始 slide1 。但是我得到的是一个空白的白色 div。当我点击选项卡时如何从 1 开始有什么想法吗？

Answer 1

这就是 Slidesjs 将不可见值计算为 height: 0 width: 0

的问题

解决方案非常简单:您应该不在 document 就绪事件中初始化幻灯片js，而是在用户实际单击选项卡以及显示选项卡内容后初始化。

这就是我首先初始化可见的方式:

  $('.bc-slider .frames:visible')).slidesjs({
    width:      1024,
    height:     260,
    play:       {
      auto:   false,
      effect: "slide"
    },
    navigation: {
      effect: "slide",
      active: false
    },
    pagination: {
      active: false,
      effect: "slide"
    },
    effect:     {
      fade: {
        speed: 500
      }
    }
  });

这是显示隐藏 slider 的代码:

content.eq(index).find('.frames').slidesjs({
  width:      1024,
  height:     260,
  play:       {
    auto:   false,
    effect: "slide"
  },
  navigation: {
    effect: "slide",
    active: false
  },
  pagination: {
    active: false,
    effect: "slide"
  },
  effect:     {
    fade: {
      speed: 500
    }
  }
});

content 是一个事件局部变量，其中包含对当前显示的选项卡的引用。