slideshow going all at once

Question

I am making a slideshow with jQuery.

Here is the code:

$(function() {
  var slides = $(".slide-img");
  slides.eq(0).fadeIn(600); // initialize first slide
  $(".btn-container button:eq(0)").addClass('active'); // add active class to button
  $(".btn-container button").click(function() {
    $(".btn-container button").removeClass('active');
    $(this).addClass('active');
    var imgCode = $(this).attr('data-slide');
    $(".slide-container img").fadeOut(600);
    $(".slide-container img").eq(imgCode).delay(600).fadeIn(600);
    var title = $(".slide-container img").eq(imgCode).attr('data-title');
    $(".slide-container .title .text").hide().text(title).delay(500).fadeIn(800);
  });
  var timeout = function() {
    $(".btn-container button").stop().each(function() {
      $(this).click();
    }).stop();
  }
  window.setInterval(timeout, 3000);


});

<div class="wrapper">
  <div class="slide-container container">
    <div class="slide">
      <img src="http://static2.businessinsider.com/image/4e15d75ccadcbb1349070000/ukraine-may-face-8-billion-in-losses-from-hosting-a-soccer-tournament.jpg" class="slide-img" data-title="GOAL!" />
      <img src="http://static6.businessinsider.com/image/4cf64ef84bd7c8ae78160000/italian-soccer-serie-a-italy.jpg" class="slide-img" data-title="Italian Soccer" />
      <img src="http://static5.businessinsider.com/image/4dc7f45249e2ae2a272a0000/there-are-only-7-people-who-make-1000000-playing-soccer-in-mls.jpg" class="slide-img" data-title="Landon Donovan" />
      <span class="title"><span class="text">GOAL!</span></span>
    </div>
  </div>
  <div class="btn-container container">
    <button class="control" data-slide="0">&bull;</button>
    <button class="control" data-slide="1">&bull;</button>
    <button class="control" data-slide="2">&bull;</button>
  </div>
</div>

This is supposed to change the image displayed with a setInterval(). But what happens is all the images show up at the same time. How can I make them fade in and out as they should?

Answer 1

Your code didn't work because you haven't choose which button you want to triggers. From your original code, it will trigger both the 2nd and 3rd simultaneously.

So, I change your Js into below code, check out my Fiddle:

var imgCode = 0;//to track which buttons is currently activated.
var slides = $(".slide-img");
slides.eq(0).fadeIn(600); // initialize first slide
$(".btn-container button:eq(0)").addClass('active'); // add active class to button

$(".btn-container button").click(function(){
    $(".btn-container button").removeClass('active');
    $(this).addClass('active');
    var imgCode = $(this).attr('data-slide');
    $(".slide-container img").fadeOut(600);
    $(".slide-container img").eq(imgCode).delay(600).fadeIn(600);
    var title = $(".slide-container img").eq(imgCode).attr('data-title');
    $(".slide-container .title .text").hide().text(title).delay(500).fadeIn(800);
});
var timeout = function(){
    $(".btn-container button").each(function(index){
        if(imgCode + 1 == index){
            imgCode = imgCode + 1;
            //reset the imgCode so it will loop
            if(imgCode == $(".slide-img").length - 1){
                imgCode = -1;
            }
            $(this).trigger("click");
            return false;
        }
    });
}

window.setInterval(timeout, 3000);

Answer 2

You should use some CSS!

$(function() {
  var slides = $(".slide-img");
  slides.eq(0).fadeIn(600); // initialize first slide
  $(".btn-container button:eq(0)").addClass('active'); // add active class to button
  $(".btn-container button").click(function() {
    $(".btn-container button").removeClass('active');
    $(this).addClass('active');
    var imgCode = $(this).attr('data-slide');
    $(".slide-container img").fadeOut(600);
    $(".slide-container img").eq(imgCode).delay(600).fadeIn(600);
    var title = $(".slide-container img").eq(imgCode).attr('data-title');
    $(".slide-container .title .text").hide().text(title).delay(500).fadeIn(800);
  });
  var timeout = function() {
    $(".btn-container button").stop().each(function() {
      $(this).click();
    }).stop();
  }
  window.setInterval(timeout, 3000);
});

.slide-img {
  position: absolute;
  z-index: 0;
}
.active {
  z-index: 1;
}
.moretext {
  position: absolute;
  left: 450px;
  top: 50px
}

.btn-container {
  position:absolute;
  left: 450px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="slide-container container">
    <div class="slide">
      <img src="http://static2.businessinsider.com/image/4e15d75ccadcbb1349070000/ukraine-may-face-8-billion-in-losses-from-hosting-a-soccer-tournament.jpg" class="slide-img" data-title="GOAL!" style="display: none" />
      <img src="http://static6.businessinsider.com/image/4cf64ef84bd7c8ae78160000/italian-soccer-serie-a-italy.jpg" class="slide-img" data-title="Italian Soccer" style="display: none" />
      <img src="http://static5.businessinsider.com/image/4dc7f45249e2ae2a272a0000/there-are-only-7-people-who-make-1000000-playing-soccer-in-mls.jpg" class="slide-img" data-title="Landon Donovan" style="display: none" />
      <div class="moretext">
        <span class="title"><span class="text">GOAL!</span></span>
      </div>
    </div>
  </div>
  <div class="btn-container container">
    <button class="control" data-slide="0">&bull;</button>
    <button class="control" data-slide="1">&bull;</button>
    <button class="control" data-slide="2">&bull;</button>
  </div>
</div>

Answer 3

You need to know where to start first and then the next sibling has to be clicked. http://jsfiddle.net/5jd9pbsd/7/

var timeout = function () {
    $(".btn-container button.active").next().click();
}