Jquery Carousel and JQuery UI Slider

Question

Is it possible to use JQuery UI slider with the JQuery Carousel plugin?

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

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

I guess it will be related to callbacks on the change event of the Slider plugin, but I have no idea how to tie it in.

My jquery at this stage is:

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

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


});

Is it even possible? I'd rather figure it out myself but no idea where to start.

I briefly looked for a slider with carousel like functionality but I failed miserably.

Thanks ~

edit updated code:

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));             
        }
    });

});

presumably I need to know in advance how many items there will be, to set the Slider min/max?

thanks again

Answer 1

Read source code of this page - http://sorgalla.com/projects/jcarousel/examples/static_controls.html

In your slider you can use:

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

UPDATE:

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,              
  }); 

});