CODEWITHSUNDEEP
javascriptjqueryhtml
Thomas
Thomas

Reputation: 5089

Timer on slide show

So I set up a slideshow to show like this:

J/S:

<script>
        $(document).ready(function() {        
            var count = $(".slider_class").length;

            var i=0;
            while (i < count){
              $(".slider_bullets").append('<a href="#" id="bullet_link_' + i +'" class="slider_bullet_btn"></a>');
              $(".slider_bullets a").click(function(){ $(".slider_class").hide(); $("#slide_"+$(this).index()).show(); });              
              $(".slider_bullets a").click(function(){ $(".slider_bullet_btn").removeClass("selected_bullet"); });
              $(".slider_bullets a").click(function(){ $(this).addClass("selected_bullet"); });

              i++;
             }
            $("#slide_0").show();
            $("#bullet_link_0").addClass("selected_bullet");
        });
        </script>

HTML:

<div id="slide_0" class="slider_class">
            <div class="slider_profile_info"><h2>John Smith</h2><p>Phasellus at libero sem, non sodales velit. Proin vitae metus sed diam euismod tempus. In varius diam ut enim adipiscing aliquet.</p><img src="img/learn_more.jpg" alt="learn_more" width="152" height="35" class="learn_more_btn" /></div><div class="slider_profile_img"><img src="img/slider_overlay.png" alt="slider_overlay" width="710" height="359" /></div>
            </div>


            <div id="slide_1" class="slider_class">
            <div class="slider_profile_info"><h2>John Smith</h2><p>Phasellus at libero sem, non sodales velit. Proin vitae metus sed diam euismod tempus. In varius diam ut enim adipiscing aliquet.</p><img src="img/learn_more.jpg" alt="learn_more" width="152" height="35" class="learn_more_btn" /></div><div class="slider_profile_img"><img src="img/slider_overlay.png" alt="slider_overlay" width="710" height="359" /></div>
            </div>


            <div id="slide_2" class="slider_class">
            <div class="slider_profile_info"><h2>John Smith</h2><p>Phasellus at libero sem, non sodales velit. Proin vitae metus sed diam euismod tempus. In varius diam ut enim adipiscing aliquet.</p><img src="img/learn_more.jpg" alt="learn_more" width="152" height="35" class="learn_more_btn" /></div><div class="slider_profile_img"><img src="img/slider_overlay.png" alt="slider_overlay" width="710" height="359" /></div>
            </div><div class="slider_bullets"></div>

But now I'd like to add a timer to cycle through all of the different slides. I know how to accomplish this with a fixed number of slides but I can't imagine how I would handle it with an unknown number of slides. I tried using setInterval but I couldn't figure out how to get the next slide ID in a progression in order to display it. Any ideas?

Upvotes: 0

Views: 616

Answers (1)

Andr&#233; Al&#231;ada Padez
Andr&#233; Al&#231;ada Padez

Reputation: 11598

you could do something like:

$(document).ready(function() {        
        var count = $(".slider_class").length;
        $("#slide_0").show();
        var currentSlide = 0;
        var interval = setInterval(function(){
           if (++currentSlide > count)
              currentSlide = 1;
            console.log(currentSlide);
           $('.slider_class').hide();
           $('.slider_class:nth-child(' + currentSlide + ')').show();
        }, 1000);
    });

this would work for whatever count of slides you have

Upvotes: 3

Related Questions