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

回答

相关问题