Question

I modified a pre-designed slideshow that I found here and I would like to edit it so that it autoplays without the user having to click the arrows. I’m not sure how to do this, however. Can you simulate clicks with jQuery? Is this the best way to do it?

Answer 1

Here is the solution I came up with. It gets the current slide and advances every 3.5 seconds. This works specifically for 4 slides instead of the 5 slides that are shown in the tutorial. My script also accounts for reaching the final slide and looping back to the first one, as well as advancing from the most current slide if the user advances them on his/her own.

Each slide looks like this…

<input value="0" type="radio" id="button-1" name="controls" checked="checked"/>

…with the checked = “checked” on the current slide. The value is 0, 1, 2, 3, …, n for each slide.

<script type="text/javascript">
        var tmp = 0;
        $(document).ready(
            function() { 
                tmp = parseInt($('input[name=controls]:checked').val());
                var tid = setInterval(advance, 3500);
            }
        );

        function advance() {
            if(tmp == 3) {
                $('input[name=controls]:eq(0)').attr('checked', 'checked');
                tmp = 0;
            }
            else { 
                $('input[name=controls]:eq(' + (tmp+1) + ')').attr('checked', 'checked'); 
                tmp = parseInt($('input[name=controls]:checked').val());
            }
        }

        function abortTimer() { clearInterval(tid); }
    </script>