CODEWITHSUNDEEP
javascriptjquery
Lieutenant Dan
Lieutenant Dan

Reputation: 8294

implement setInterval function for autoplay on simple slider

I'm trying to add an autoplay feature that loops by default to this simple image carousel that has captions. My first attempt was just adding what was included for click function under on dom ready as well.. this didn't work. Note I still need the navigation buttons to remain working as well.

jQuery:

 $(document).ready(function() {
    $('.img-wrap .slideZ:gt(0)').hide();
    $('.nextbox').click(function() {
        $('.captionZ').fadeIn();
        $('.img-wrap .slideZ:first-child').fadeOut("slow").next().fadeIn("slow").end().appendTo('.img-wrap');
    });
    $('.prevbox').click(function() {
        $('.captionZ').fadeIn();
        $('.img-wrap .slideZ:first-child').fadeOut();
        $('.img-wrap .slideZ:last-child').prependTo('.img-wrap').fadeOut();
        $('.img-wrap .slideZ:first-child').fadeIn();
     });
    });

Mark-Up:

<div class="paginateyo">
            <div class="prevbox">
            <img src="images/prev_arrow.jpg" id="prv" alt="Previous"/>
            <span class="prvp">previous</span>
            </div>
            /
            <div class="nextbox">
            <span class="nxtp">next</span>
            <img src="images/next_arrow.jpg" id="nxt" alt="Next"/>
            </div>
        </div>
        </div>  

        <div id="img-grp-wrap">
            <div class="img-wrap">
                <div class="slideZ">
                <img src="images/slide_image1.jpg" alt=""/>
                <div class="captionZ">aaaaaaaaaaaaaa
                </div>
                </div>
                <div class="slideZ">
                <img src="images/slide_image2.jpg" alt=""/>
                <div class="captionZ">bbbbbbbbbbbbbb
                </div>
                </div>
                <div class="slideZ">
                <img src="images/slide_image3.jpg" alt=""/>
                <div class="captionZ">cccccccccccccccc
                </div>
                </div>
                <div class="slideZ">
                <img src="images/slide_image4.jpg" alt=""/>
                <div class="captionZ">dddddddddddddddd
                </div>
                </div>
                <div class="slideZ">
                <img src="images/slide_image5.jpg" alt=""/>
                <div class="captionZ">eeeeeeeeeeeeeeeeee
                </div>
                </div>
                <div class="slideZ">
                <img src="images/slide_image6.jpg" alt=""/>
                <div class="captionZ">fffffffffffffffff
                </div>
                </div>
                <div class="slideZ">
                <img src="images/slide_image7.jpg" alt=""/>
                <div class="captionZ">gggggggggggggggggg
                </div>
                </div>
            </div>  

        </div>

Upvotes: 0

Views: 292

Answers (1)

Newspire
Newspire

Reputation: 104

Do something like this:

function interval(){
    function(){
     $('.captionZ').fadeIn();
     $('.img-wrap .slideZ:first-child').fadeOut("slow").next().fadeIn("slow").end().appendTo('.img-wrap');
}    
var t = setInterval(interval) ;

If you want it to move on to the "next" image. Depending on how you want it set up, you could also make it so that onclick makes it reset the setInterval() function by removing the interval with window.clearInterval(interval) then creating a new one.

Upvotes: 1

Related Questions