Question

我使用jquery Ui在两个不同的标签中制作了两个jcarousel滑块...

当我更改标签部分时，滑块必须重置（或）重新加载并移动到第一张图像。

我使用过这个脚本

jQuery(document).ready(function() {
  jQuery('#mycarousel').jcarousel();
  jQuery('#mycarousel2').jcarousel();
  $( "#tabs" ).tabs();
});

我试过这个脚本我对代码没有任何影响

<script type="text/javascript"> 
    var theModelCarousel = null; 

    function modelCarousel_initCallback(carousel) { 
        theModelCarousel = carousel; 

    }; 

    jQuery('#tabs-2').click(function() { 


         jQuery('#mycarousel').jcarousel({ 
            initCallback: modelCarousel_initCallback 

        });

    }); 

    function clearModelCarousel() { 
        theModelCarousel.reset(); 

    } 
</script>

如果我更改为另一个标签（无需刷新页面），如何重置滑块。

我在这里做了BIN以便于理解。

Answer 1

您可以尝试使用jcarousel中的重新加载选项

.jcarousel('reload' [, options])

jCarousel API

$('.jcarousel').jcarousel('reload', {
    'animation': 'slow'
});

Answer 2

参考API

这真的是一个简单的问题

http://sorgalla.com/jcarousel/docs/reference/api.html

 .jcarousel('reload' [, options])

Answer 3

jQuery('#mycarousel').data('jcarousel').scroll(0);

这会将您的轮播重置为起始位置;

或者如果在一个函数中你有旋转木马对象

carousel.scroll(0);

Answer 4

我遇到了同样的问题，.jcarousel('reload' [, options])或$('#mycarousel').jcarousel('scroll', 0);产生了奇怪的副作用。

('scroll', 0)只是随机工作，因为jcarousel重新排列你的元素。

('reload' [, options])正在制作第一眼，但当您点击下一张照片按钮时，它会滑动到您看到的最后一张照片旁边的照片。如果我们最后使用上一张图片按钮，则无法正常工作。

对我来说有用的是每次打开时将jcarousel脚本绑定到图库，然后在每次关闭时销毁jcarousel：

删除jcarousel使用：

$（ '画廊。 '）的jCarousel（' 破坏'）;

Answer 5

  $('#tabs').on('click', '.ui-tabs-anchor', function() {
    $('#mycarousel').jcarousel('scroll', 0);
    $('#mycarousel2').jcarousel('scroll', 0);
  });

也许可以使用滚动方法来定位轮播中的第一项。 http://jsbin.com/idabit/23/edit

在标签更改时重置或重新加载Jcarousel

5 个答案: