使用 jQuery UI 滑块小部件控制 jQuery Cycle？答案

【问题标题】：Controlling jQuery Cycle with jQuery UI slider widget?使用 jQuery UI 滑块小部件控制 jQuery Cycle？
【发布时间】：2013-08-03 02:37:33
【问题描述】：

我想知道是否有一种简单的方法来控制我使用 jQuery Cycle 和 UI Slider 小部件工作的图像幻灯片。

循环码是：

$(window).load(function(){
    $('.foo').cycle({
        timeout : 80,
        speed : 80 ,
        startingSlide : 0,

    }); 

});

小部件是这样的：

$(function() {
  $( "#slider-vertical" ).slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: 300,
    value: 300,
    slide: function( event, ui ) {
      $( "#amount" ).val( ui.value );
      console.log(ui.value);  
    }
  });
  $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ));
});

关于哪些 Cycle 选项可能被 ui 小部件吐出的值操纵的任何想法？谢谢！

【问题讨论】：

我不确定问题到底是什么，因为manipulated 是非常开放的。你想达到什么目的。旁注：此处的尾随逗号 startingSlide : 0, 可能会破坏某些浏览器。

标签： jquery jquery-ui jquery-cycle

【解决方案1】：

对不起，我照例在发帖后立即解决了。

jQuery Cycle 代码保持不变：

$(window).load(function(){
    $('.foo').cycle({
        timeout : 80,
        speed : 80 ,
        startingSlide : 0,
    }); 
});

我更改了 UI 小部件代码（见最后一行），我只是将小部件值传递给 Cycle。该值实质上设置了活动幻灯片。

$(function() {
  $( "#slider-vertical" ).slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: 300,
    value: 300,
    slide: function( event, ui ) {
      $(".foo").cycle(ui.value); 
    }
  });      
});

【讨论】：