Adding a fade effect to an image slider

Question

I have a working image slider.

 var sliderIndex = 0; // start with the first image var autoSlideHandler; // for the reset var activeDuration = 3000; // each picture is active for 3 seconds startImageSlider(); function startImageSlider() { // Initialize the slider sliderIndex++; updateImageSlider(); autoSlideHandler = setTimeout(startImageSlider, activeDuration); } function changeSliderImage(direction) { // change images manually by pressing the buttons sliderIndex += direction; updateImageSlider(); clearTimeout(autoSlideHandler); autoSlideHandler = setTimeout(startImageSlider, activeDuration); } function updateImageSlider() { // switch the images var sliderImages = $(".sliderImg"); for (var i = 0; i < sliderImages.length; i++) { sliderImages[i].style.display = "none"; // hide the current image } if (sliderIndex > sliderImages.length) { sliderIndex = 1; } else if (sliderIndex < 1) { sliderIndex = sliderImages.length; } sliderImages[sliderIndex - 1].style.display = "block"; // show the next image } 

 #containerImageSlider { width: 200px; height: 100px; position: relative; top: 50%; left: 50%; transform: translateX(-50%) translateY(25%); } .sliderImg{ width: 100%; height: 100%; } .sliderBtn { width: 64px; height: 64px; top: 50%; position: absolute; } #sliderBtnRight{ left: -200px; /* background-image: url("../../Resources/slideImageLeft.png"); */ } #sliderBtnLeft{ right: -200px; /* background-image: url("../../Resources/slideImageRight.png"); */ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="containerImageSlider"> <button class="sliderBtn" id="sliderBtnLeft" onclick="changeSliderImage(1)"></button> <img class="sliderImg" src="Resources/SliderImages/sliderImg1.jpg"> <img class="sliderImg" src="Resources/SliderImages/sliderImg2.jpg"> <img class="sliderImg" src="Resources/SliderImages/sliderImg3.jpg"> <img class="sliderImg" src="Resources/SliderImages/sliderImg4.jpg"> <img class="sliderImg" src="Resources/SliderImages/sliderImg5.jpg"> <img class="sliderImg" src="Resources/SliderImages/sliderImg6.jpg"> <img class="sliderImg" src="Resources/SliderImages/sliderImg7.jpg"> <img class="sliderImg" src="Resources/SliderImages/sliderImg8.jpg"> <img class="sliderImg" src="Resources/SliderImages/sliderImg9.jpg"> <img class="sliderImg" src="Resources/SliderImages/sliderImg10.jpg"> <button class="sliderBtn" id="sliderBtnRight" onclick="changeSliderImage(-1)"></button> </div> 

So when calling the function updateImageSlider() I want the current Image fading out and the next image fading in.

Example

$(currentImage).fadeOut(1000, function () {
    // hide the image
});

$(nextImage).fadeIn(1000, function () {
    // show the image
});

But when trying to put this code into my existing code it doesn't seem to work fine.

I thought about writing

    var currentImage = sliderImages[i];
    $(currentImage).fadeOut(1000, function () {
        currentImage.style.display = "none";
    });

and

var nextImage = sliderImages[sliderIndex - 1];
$(nextImage).fadeIn(1000, function () {
    nextImage.style.display = "block";
});

but this does not fit into my code. The current Image is fading out while the next image is already fading in below the current container...

Answer 1

Try to change your updateImageSlider() function as like below and check,

function updateImageSlider() { // switch the images
  var sliderImages = $(".sliderImg");

  for (var i = 0; i < sliderImages.length; i++) {
    $(sliderImages[i]).fadeOut(1000); // hide the current image
  }
  if (sliderIndex > sliderImages.length) {
    sliderIndex = 1;
  } else if (sliderIndex < 1) {
    sliderIndex = sliderImages.length;
  }

  setTimeout(function() {
    $(sliderImages[sliderIndex - 1]).fadeIn(1000); // show the next image
  }, 1000);
}

Check this fiddler for reference.

Answer 2

Tried to apply the below updateImageSlider() Function :

function updateImageSlider() { // switch the images
    var sliderImages = $(".sliderImg");

    for (var i = 0; i < sliderImages.length; i++) {
         sliderImages[i].css('display','none').fadeOut(); // hide the current image
    }
    if (sliderIndex > sliderImages.length) {
        sliderIndex = 1;
    }
    else if (sliderIndex < 1) {
        sliderIndex = sliderImages.length;
    }
    sliderImages[sliderIndex - 1].css('display','block').fadeIn(); // show the next image
}