Jquery Carousel und JQuery UI Slider

Question

Ist es möglich, JQuery UI-Schieberegler mit dem JQuery Carousel-Plugin zu verwenden?

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

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

Ich denke, es wird Rückrufe auf dem change Ereignisse des Plugins Slider in Beziehung gesetzt werden, aber ich habe keine Ahnung, wie es zu binden.

Mein jquery auf diesem Stufe ist:

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

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


}); 

Ist es überhaupt möglich? Ich würde es lieber selbst herausfinden, aber keine Ahnung, wo ich anfangen soll.

Ich suchte kurz nach einem Slider mit karussellartiger Funktionalität, aber ich scheiterte kläglich.

Dank ~

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

}); 

vermutlich muss ich im Voraus wissen, wie viele Elemente wird es sein, den Slider min/max eingestellt?

Dank wieder

Answer 1

Lesen Quelltext dieser Seite - http://sorgalla.com/projects/jcarousel/examples/static_controls.html

In Ihrem Slider Sie verwenden können:

$("#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

Haben Sie erreichen wollen etwas wie das? (link)

Es gibt Tutorial mit Quellcode, CSS/Grafiken ändern und Sie sollten ganz gut ;-)

bearbeiten sein: Hier ist mächtiger Schieber, mit umfangreichen Funktionen :) (link)

Answer 3

Es scheint

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

funktioniert. Nicht sicher, ob dies der ~ beste ~ Weg ist, aber es scheint den Trick zu machen