Jquery Carousel和JQuery UI Slider

是否有可能在JQuery Carousel插件中使用JQuery UI滑塊？Jquery Carousel和JQuery UI Slider

我想這會涉及到對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));    
     } 
    }); 

});

想必我需要提前知道有多少項目會出現，設置滑塊最小/最大？

再次感謝

來源

2011-01-06 Ross

本頁面

閱讀源代碼 - 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,    
    }); 

});

來源

2011-01-06 14:52:56 Igor

當然，在您的情況下，carousel = jQuery（'＃tiles'）。 – Igor 2011-01-06 14:57:18

這是非常有道理的，但我已經設法打破它，已發佈當前代碼在原來的職位〜。謝謝 – Ross 2011-01-06 15:19:43

你想實現像這樣？（link）

有教程，源代碼，修改你的CSS /圖形，你應該就好;-)

編輯： 這是更強大的滑塊，具有豐富的功能:) （ link）

來源

2011-01-06 15:16:30 Andreyco

這樣看來

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

作品。不知道這是否是〜最好的方式，但它似乎伎倆

來源

2011-01-06 16:13:44 Ross

Jquery Carousel和JQuery UI Slider

回答

相關問題