How do I set jQ UI Slider Widget to display an image on the last step?

Question

I have a jQuery UI Slider working here: http://energync.ehclients.com/slider2.html and I like the way it is working. I just need to make one tweak and I will be set.

Currently there are three steps to the slider: 1. first slide 2. second slide 3. blank.

How do I modify the following jQuery to only two steps, showing only slide one and two but no blank?

Thanks!

    $(function() {
    $('#sliderContent .item:first').addClass('shown').show();
    $("#slider").slider({
        value: 0,
        min: 0,
        max: $('#sliderContent .item').size(),
        step: 1
    }).bind("slide", function(event, ui) {
        var newIndex = ui.value;
        var oldIndex = $('#sliderContent .item').index('.shown');
        if (newIndex != oldIndex) {
            $('.shown').fadeOut(150).removeClass('shown');
            $('#sliderContent .item').eq(newIndex).fadeIn(150).addClass('shown');
        }
    });
});

score 1 · Accepted Answer · answered Feb 26 '13 at 17:37

1

Set max to $('#sliderContent .item').size() - 1.

answered Feb 26 '13 at 17:37

Alexander

23,432
11
63
73

Hi Alexander, thank you for the quick response. Works perfect. – forrest Feb 26 '13 at 17:40

How do I set jQ UI Slider Widget to display an image on the last step?

1 Answers1