How can I autoplay this javascript slider?

Question

I have found this nice js slider that works by clicking on radio buttons, selecting the slides to view.

I'd like it to autoplay the slides, and give it a time for slides and transitions, but I'm honestly unsure where to put those values.

I've seen the other questions about similar problems, but couldn't find a proper answer to my problem. Help, please?

<script type="text/javascript">
    $(document).ready(function () {

        var showCaseItems = $('.show-case-item').hide();

        var splashes = $('.splash').hide();
        //get each image for each slide and set it as a background of the slide
        //            splashes.each(function () {
        //                var img = $(this).find('img');
        //                var imgSrc = img.attr('src');
        //                img.css('visibility', 'hidden');
        //                $(this).css({ 'background-image': 'url(' + imgSrc + ')', 'background-repeat': 'no-repeat' });
        //            });

        splashes.eq(0).show();
        showCaseItems.eq(0).show();

        var prevIndex = -1;
        var nextIndex = 0;
        var currentIndex = 0;

        $('#banner-pagination li a').click(function () {

            nextIndex = parseInt($(this).attr('rel'));

            if (nextIndex != currentIndex) {
                $('#banner-pagination li a').html('<img src="assets/img/slidedot.png" alt="slide"/>');
                $(this).html('<img src="assets/img/slidedot-active.png" alt="slide"/>');
                currentIndex = nextIndex;
                if (prevIndex < 0) prevIndex = 0;

                splashes.eq(prevIndex).css({ opacity: 1 }).animate({ opacity: 0 }, 500, function () {
                    $(this).hide();
                });
                splashes.eq(nextIndex).show().css({ opacity: 0 }).animate({ opacity: 1 }, 500, function () { });

                showCaseItems.eq(prevIndex).css({ opacity: 1 }).animate({ opacity: 0 }, 500, function () {
                    $(this).hide();
                    showCaseItems.eq(nextIndex).show().css({ opacity: 0 }).animate({ opacity: 1 }, 200, function () { });
                });

                prevIndex = nextIndex;
            }

            return false;
        });

    });
</script>

score 1 · Answer 1 · answered Apr 04 '13 at 09:08

1

You can use jquery and setTimeout

setTimeout(function() {$('#banner-pagination li a').trigger('click');}, 1500);

this code will loop every 1.5 seconds and trigger a click on #banner-pagination li a

answered Apr 04 '13 at 09:08

vlio20

8,955
18
95
180

Hi, thank you so much for your answer, it works only in part: I have three slides and the code you suggested makes it slide from the first slide to the third, and then nothing. I'm gonna play with it a little, but if you have any idea why this occurs, please let me know! – Marco Apr 04 '13 at 09:14
I literally have dozens of .css and .js. I'm afraid that fiddling it would take me more than my office hours! I tried to set the "var nextIndex" to 1, with no results. Mh. – Marco Apr 04 '13 at 09:31

score 0 · Answer 2 · answered Apr 04 '13 at 10:05

0

you can use the jquery trigger event and hit the radio button click event forcefully

$('#foo').trigger('click');

http://api.jquery.com/trigger/

answered Apr 04 '13 at 10:05

meer

932
1
10
11

score 0 · Answer 3 · edited Aug 16 '13 at 09:23

0

setInterval(function() 
  {$('#banner-pagination li a[rel='+((currentIndex+1)%3)+']').trigger('click');},5000);

Thanks

edited Aug 16 '13 at 09:23

kleopatra

51,061
28
99
211

answered Aug 16 '13 at 09:16

Namrata Tolani

823
9
12

How can I autoplay this javascript slider?

3 Answers3