Jquery 轮播和 JQuery UI slider

Question

是否可以将 JQuery UI slider 与 JQuery Carousel 插件一起使用？

http://jqueryui.com/demos/slider/

http://sorgalla.com/projects/jcarousel/

我猜这将与 Slider 插件的 change 事件的回调有关，但我不知道如何将其绑定(bind)。

现阶段我的jquery是:

$(document).ready(function() {
    jQuery('#tiles').jcarousel({
        //auto: 2,
        wrap: 'last'
    });

    $( "#slider" ).slider({
        change: function(event, ui) {
        // callback when the slide event fires.         
        }
    });


});

这可能吗？我宁愿自己弄清楚，但不知道从哪里开始。

我曾短暂地寻找过一个具有类似轮播功能的 slider ，但我惨遭失败。

谢谢~

编辑更新的代码:

jQuery(document).ready(function() {

    jQuery("#tiles").jcarousel({
        //auto: 2,
        scroll: 1,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });

    $( "#slider" ).slider({
        min: 0,
        max:4,
        change: function(event, ui) {
            alert(ui.value);
            jQuery('#tiles').scroll(jQuery.jcarousel.intval(ui.value));             
        }
    });

});

大概我需要提前知道有多少个项目，才能设置 slider 最小/最大？

再次感谢

Answer 1

阅读此页面的源代码 - http://sorgalla.com/projects/jcarousel/examples/static_controls.html

在 slider 中您可以使用:

$( "#slider" ).slider({
    change: function(event, ui) {            
        carousel.scroll(jQuery.jcarousel.intval(ui.value));        
    }
});

更新:

function mycarousel_initCallback(carousel) {
   $( ".slider" ).bind( "slidechange", function(event, ui) {
  carousel.scroll(ui.value);
   });
};

jQuery(document).ready(function() {
  jQuery("#mycarousel").jcarousel({
    scroll: 1,
    initCallback: mycarousel_initCallback,
    buttonNextHTML: null,
    buttonPrevHTML: null
  });

  $('.slider1').slider({
    value: 1,
    min:1,
    max:6,              
  }); 

});