Question

是否可以将JQuery UI滑块与JQuery Carousel插件一起使用？

我想这与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));             
        }
    });

});

大概我需要预先知道有多少项，设置Slider min / max？

再次感谢

Answer 1

阅读此页面的源代码 - http://sorgalla.com/projects/jcarousel/examples/static_controls.html

在滑块中，您可以使用：

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

更新：

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 /图形，你应该没问题; - ）

修改： 这是更强大的滑块，具有丰富的功能:) （link）

Jquery Carousel和JQuery UI Slider

3 个答案: