Jquery Carousel and JQuery UI Slider

Question

Is it possible to use JQuery UI slider with the JQuery Carousel plugin?

I guess it will be related to callbacks on the change event of the Slider plugin, but I have no idea how to tie it in.

My jquery at this stage is:

$(document).ready(function() {
    jQuery('#tiles').jcarousel({
        //auto: 2,
        wrap: 'last'
    });

    $( "#slider" ).slider({
        change: function(event, ui) {
        // callback when the slide event fires.         
        }
    });


});

Is it even possible? I'd rather figure it out myself but no idea where to start.

I briefly looked for a slider with carousel like functionality but I failed miserably.

Thanks ~

edit updated code:

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));             
        }
    });

});

presumably I need to know in advance how many items there will be, to set the Slider min/max?

thanks again

Igor · Accepted Answer · 2011-01-06T16:32:00.500

2

Read source code of this page - http://sorgalla.com/projects/jcarousel/examples/static_controls.html

In your slider you can use:

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

});

edited Jan 06 '11 at 16:32

answered Jan 06 '11 at 14:52

Igor

1,476
10
6

that makes perfect sense but I've managed to break it, have posted current code in original post ~. thanks – Ross Jan 06 '11 at 15:19
1

yes, I've made a mistake. I'm sorry for that. But I fixed - http://pastebin.com/JZG346SE check this. – Igor Jan 06 '11 at 16:27

Andreyco · Answer 2 · 2011-01-06T15:29:03.823

1

Do you want to achieve something like this? (link)

There is tutorial with source code, modify your CSS/graphics and you should be just fine ;-)

Edit: Here is more powerfull slider, with rich features :) (link)

edited Jan 06 '11 at 15:29

answered Jan 06 '11 at 15:16

Andreyco

22,476
5
61
65

more or less yes. that looks quite promising, will take a proper look, but looks like I can do what I want using the above (once I stop being thick). – Ross Jan 06 '11 at 15:23
1

I have updated my post with additional link, with more advanced slider. Looks promising. – Andreyco Jan 06 '11 at 15:30

score 0 · Answer 3 · answered Jan 06 '11 at 16:13

It would appear

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

works. Not sure if this is the ~best~ way, but it seems to do the trick

Jquery Carousel and JQuery UI Slider

3 Answers3