JQuery Carousel и JQuery UI Slider

Question

Можно ли использовать слайдер JQuery UI с плагином Joyu Carousel?

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

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

Я предполагаю, что это будет связано с обратных вызовов на change случае плагин слайдера, но я понятия не имею, как связать его.

Мой JQuery в этом этап:

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

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


}); 

Возможно ли это? Я бы предпочел выяснить это сам, но не знаю, с чего начать.

Я коротко искал слайдер с карусельной функциональностью, но я потерпел неудачу с треском.

Благодаря ~

редактировать обновленный код:

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

}); 

предположительно мне нужно знать заранее, сколько элементов будет, чтобы установить слайдер мин/макс?

еще раз спасибо

Answer 1

Читать исходный код этой страницы - http://sorgalla.com/projects/jcarousel/examples/static_controls.html

В вашем слайдера вы можете использовать:

$("#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,    
    }); 

}); 

Answer 2

Вы хотите достичь что-то вроде этого? (link)

Существует учебник с исходным кодом, измените ваши CSS/графики, и вы должны быть очень хорошо ;-)

Edit: Вот более мощный слайдер, с богатыми возможностями :) (link)

Answer 3

Казалось бы

$("#slider").slider({ 
    min:1, 
    max:10, 
    slide: function(event, ui) { 
     //$('#tiles').scroll(jQuery.jcarousel.intval(ui.value)); 
     jQuery('#tiles').jcarousel('scroll',ui.value); 
    } 
}); 

работы. Не уверен, что это лучший способ, но, похоже, это трюк