Jquery Carousel und JQuery UI Slider

Ist es möglich mit JQuery UI-slider mit dem JQuery Carousel plugin?

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

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

Ich denke, es wird im Zusammenhang mit Rückrufen auf die change - Ereignis der Slider-plugin, aber ich habe keine Ahnung, wie binden Sie es in.

Mein jquery in dieser Phase 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 lieber herausfinden, selbst aber keine Ahnung, wo zu beginnen.

Ich kurz nachgeschaut für einen slider mit Karussell-ähnliche Funktionalität, aber ich scheiterte kläglich.

Dank ~

Bearbeiten aktualisierten 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 gibt es, um den Regler min - /max?

nochmals vielen Dank

InformationsquelleAutor Ross | 2011-01-06

  1. 2

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

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

});
    Natürlich, carousel = jQuery('#Kacheln"), in Ihrem Fall.
    das macht Sinn, aber ich habe es geschafft, es zu brechen, haben gepostet aktuellen code im original-post ~. Dank
    ja, ich habe einen Fehler gemacht. Tut mir Leid. Aber ich fest - pastebin.com/JZG346SE überprüfen.
    perfekt. cheers

    InformationsquelleAutor Igor

  2. 1

    Wollen Sie etwas erreichen wollen? (link)

    Gibt es tutorial mit source-code, ändern Sie Ihre CSS/Grafiken, und Sie sollten in Ordnung sein 😉

    Edit:
    Hier ist mächtiger slider mit vielen Funktionen 🙂
    (link)

    mehr oder weniger ja. das sieht ja ziemlich vielversprechend, wird einen richtigen look, aber sieht aus wie ich kann tun was ich will mit der oben (nachdem ich aufhören, dick).
    Ich habe meinen Beitrag aktualisiert mit zusätzlichen link, mit mehr erweiterte Schieberegler. Sieht vielversprechend aus.

    InformationsquelleAutor Andreyco

  3. 0

    Scheint es

    $( "#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 das ~beste~ Weg, aber es scheint, den trick zu tun

    InformationsquelleAutor Ross

Schreibe einen Kommentar