Controlling jQuery Cycle with jQuery UI slider widget?

Question

I'm wondering whether there's an easy way to control an image slideshow that I have working with jQuery Cycle with a UI Slider widget.

Cycle code is:

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

    }); 

});

and the widget is as such:

$(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" ));
});

Any ideas on which Cycle options might be manipulated by the values that the ui widget is spitting out? Thank you!

I'm not sure exactly what the question is, as `manipulated` is very open ended. What are you trying to achieve. Side note: trailing comma here `startingSlide : 0,` can break certain browsers. — Ohgodwhy, May 04 '13 at 23:47

score 0 · Accepted Answer · answered Aug 02 '13 at 18:37

Sorry, as usual I solved it right after posting.

jQuery Cycle code remains the same:

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

And I changed the UI widget code (see the last line) as such, where I simply pass the widget value into Cycle. That value essentially sets the active slide.

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

Controlling jQuery Cycle with jQuery UI slider widget?

1 Answers1