CODEWITHSUNDEEP
javascriptjqueryhtml
Ryan
Ryan

Reputation: 1

Need slideshow to run automatically

Good day Everyone,

Can you please help me out. I have a slideshow of images (3 images) with the first one displaying when the page is loaded.

I also have next and previous buttons that work 100%. But I just want to make the slideshow move automatically to the next image after a number of seconds (5 sec) and loop (return to the first image and continue cycling through each image automatically).

I apologize for the seemingly obscure class names as they have been heavily implemented into the template that I am working with. Therefore, changing them would create a list of CSS issues as well.

My HTML

  <!-- START SLIDESHOW HOME -->
  <section id="slideshow-home" class="wrap noo-slideshow slideshow-home">
    <div class="property-slider">
      <div id="noo-slider-1" class="noo-slider noo-property-slide-wrap">
        <ul class="sliders">

          <li class="slide-item noo-property-slide">
            <img src="images/slideshow/bg-slide1.jpg" class="attachment-property-slider" alt="" />
            <div class="slide-caption">
              <div class="slide-caption-info">
                <h3><a href="property-details.html">Santa Monica, CA</a></h3>
              </div>
          </li>

          <li class="slide-item noo-property-slide">
            <img src="images/slideshow/bg-slide2.jpg" class="attachment-property-slider" alt="" />
            <div class="slide-caption">
              <div class="slide-caption-info">
                <h3><a href="property-details.html">Pacific Palisades, CA</a></h3>
              </div>
          </li>


          <li class="slide-item noo-property-slide">
            <img src="images/slideshow/bg-slide3.jpg" class="attachment-property-slider" alt="" />
            <div class="slide-caption">
              <div class="slide-caption-info">
                <h3><a href="property-details.html">Visalia, NJ 93277</a></h3>
            </div>
          </li>
        </ul>

        <div class="clearfix"></div>
        <div id="noo-slider-1-pagination" class="slider-indicators indicators-center-bottom"></div>
        <a id="noo-slider-1-prev" class="slider-control prev-btn" role="button" href="#">
          <span class="slider-icon-prev"></span>
        </a>
        <a id="noo-slider-1-next" class="slider-control next-btn" role="button" href="#">
          <span class="slider-icon-next"></span>
        </a>
      </div>
    </div>
  </section>
  <!-- END SLIDESHOW HOME -->

Upvotes: 0

Views: 54

Answers (2)

PRASHANT KUMAR
PRASHANT KUMAR

Reputation: 185

You can use setInterval() function for this.This will run for every interval of specified time.

 setInterval(function(){
    // do what you want
    // or you can use: $('#noo-slider-1-next').click();

 },time_interval_in_milliseconds);

Upvotes: 0

labago
labago

Reputation: 1346

setInterval(function(){
   nextSlide(); // <-- your slide change code
}, 5000) // <-- run this every 5 seconds

But, as others have suggested you are probably much better off just using one of the thousands of slide show plugins for jQuery

Upvotes: 1

Related Questions