CODEWITHSUNDEEP
javascripthtmlimagesliderfade
Snappysites
Snappysites

Reputation: 843

JS Slider fade images instead of simple change

I have a very simple image slider as I struggled finding one without added chaos... This one is responsive and works okay, it takes a little while to load because of the images but that's not too important. At the moment the images just switch over each time, however I am trying to get them to fade between the images? If anyone has any help that would be ideal and please keep it pretty straight forward as I am in over my head here, I work mostly with basic HTML and PHP.

This is what I have:

.slides {
  width: 100%;
}

.slides-hidden {
  display: none;
}
<script>
  addEventListener("load", () => { // "load" is safe but "DOMContentLoaded" starts earlier
    var index = 0;
    const slides = document.querySelectorAll(".slides");
    const classHide = "slides-hidden",
      count = slides.length;
    nextSlide();

    function nextSlide() {
      slides[(index++) % count].classList.add(classHide);
      slides[index % count].classList.remove(classHide);
      setTimeout(nextSlide, 8000);
    }
  });
</script>


<section>
  <img class="slides slides-hidden" src="indexslider/1.png" alt="1">
  <img class="slides slides-hidden" src="indexslider/2.png" alt="2">
  <img class="slides slides-hidden" src="indexslider/3.png" alt="3">
  <img class="slides slides-hidden" src="indexslider/4.png" alt="4">
  <img class="slides slides-hidden" src="indexslider/5.png" alt="5">
</section>

Upvotes: 1

Views: 97

Answers (1)

Rachel Gallen
Rachel Gallen

Reputation: 28563

This script is not vastly different from what you currently have, and is simple enough. To achieve the fade, I've added a class with opacity of 0 (and set current opacity to 1). The opacity changes with the css transition (with the fade class being added in the javascript).

I have set up the images as an array in the javscript (whether this is workable for your code depends on how many images you have, but i guessed since it's a simple example, you were only using a few). I've used placeholder images of different sizes to demonstrate.

As you can see, the javascript is pretty short and simple; loops through the array and displays each image for 3 seconds. (8 seconds is long for demo purposes!)

Hope you find this useful.

var myImages = [
    'https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg',
    'https://cdn.pixabay.com/photo/2020/11/24/12/23/flowering-dogwood-5772385_960_720.jpg',
    'https://cdn.pixabay.com/photo/2016/12/16/15/25/christmas-1911637_960_720.jpg',
    'https://cdn.pixabay.com/photo/2014/12/21/07/49/fireworks-574739_960_720.jpg',
    'https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_960_720.jpg'
  ],
  curIndex = 0;
imgShow = 3000; /*yours is 8 secs, but for demo purposes, 3 secs is shorter!*/

function playSlides() {
  document.getElementById('slider').className += "fadeOut";
  setTimeout(function() {
    document.getElementById('slider').src = myImages[curIndex];
    document.getElementById('slider').className = "";
  }, 1000);
  curIndex++;
  if (curIndex == myImages.length) {
    curIndex = 0;
  }
  setTimeout(playSlides, imgShow);
}
playSlides();
#slider {
  opacity: 1;
  transition: opacity 1s;
  width: 100%;
  height: auto;
}

#slider.fadeOut {
  opacity: 0;
}
<img id="slider" src="http://placehold.it/200x200">

Upvotes: 1

Related Questions