how to make this slider autoplay the images rather than click

Question

I have been able to make this slider do everything I have wanted out of it but I can't figure out how to make it auto play the images. I would like to be able to auto-play and click to advance but I just don't know enough about JavaScript to make these functions possible.

Thank you in advance for your help.

HTML

    <div id="image-area">
      <div class="img-area-wrapper">
        <img src="http://www.socwall.com/images/wallpapers/57751-1920x1080.jpg" class="actual-img">
      </div>
    </div>

    <div id="image-area2">
      <div class="img-area-wrapper">
        <img src="http://www.socwall.com/images/wallpapers/38075-1920x1200.jpg" class="actual-img">
      </div>
    </div>

    <div id="image-area3">
      <div class="img-area-wrapper">
        <img src="http://www.socwall.com/images/wallpapers/37436-1500x1000.jpg" class="actual-img">
      </div>
    </div>

    <div class="slider-buttons">
      <div class="slider-buttons-container">
        <a href="image-area" class="o-links">&nbsp;</a>
        <a href="image-area2" class="o-links">&nbsp;</a>
        <a href="image-area3" class="o-links">&nbsp;</a>
      </div>
    </div>

  </div>
</section>

CSS

#image-slider-container {

width: 100%;
height: auto;
background-color: #ffffff;
padding: 5% 0px 0% 0px;

}

.image-slider-inner {

width: 100%;
height: auto;     
max-width: 1040px;
margin: 0px auto;
padding: 0px 20px 0px 20px;

}

#image-area2,
#image-area3 {

width: 100%;
height: auto;
display: none;

}

#image-area {

width: 100%;
height: auto;

}

#image-area .img-area-wrapper {

width: 80%;
height: auto;     
max-width: 1140px;
margin: 0px auto;

}

.actual-img {

width: 100%;
height: 100%;

}

.slider-buttons {

width: 100%;
height: auto;
max-width: 1140px;
margin-top: 0px;

}

.slider-buttons-container {

width: 100%;
height: auto;
max-width: 1140px;
margin: 10px auto 0px auto;
text-align: center;

}

.slider-buttons-container a {

border-radius: 360px;
border: 1px #C5C5C5 solid;
padding: 0px 5px 0px 5px;
margin: 0px 5px 0px 5px;
background-color: #efefef;
outline: 0px;
text-decoration: none;
font-size: 12px;
box-shadow: -2px 1px 2px 0px #ADADAD;

transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;

}


.slider-buttons-container a:hover {

border: 1px #C5C5C5 solid;
padding: 0px 5px 0px 5px;
background-color: #DAD8D8

}

.slider-buttons-container a:active {

position: relative;
top: 2px;

}

.O_Nav_Current {

border: 1px #999999 solid !important;
background-color: #DAD8D8 !important;

}

JS

$(document).ready(function() {

    //loads default content
    //$('#image-area').load($('.menu_top a:first-child').attr('href'));

    $('.o-links').click(function() {

      // href has to be the id of the hidden content element
      var href = $(this).attr('href');
        $('#image-area').fadeOut(1000, function() {
            $(this).html($('#' + href).html()).fadeIn(1000);
        });
      return false;
    });

  });

  $(function() {
      $('.o-links').click(function(e) {

          //e.preventDefault();

          $('.o-links').not(this).removeClass('O_Nav_Current');
          $(this).addClass('O_Nav_Current');
      });
  });

Answer 1

Use the setInterval function. Move the code that you use to go to the next image into its own function and then call that function with setInterval.

The parameters of the setInterval function is the function that you want to execute and how often you want to execute the function, in milliseconds.

Ex.

var timer = setInterval(functionName,1000);