Slideshow of images with jQuery with fade

Question

I have a background and some pictures. Its auto playing but background images are not changing with transition effect. So it doesnt look well. Here my code. How can i add transition here ?

var body = $("#banner");
var backgrounds = [
  "url(./img/background/gorsel1.png)",
  "url(./img/background/gorsel2.jpg)",
  "url(./img/background/gorsel3.jpg)",
  "url(./img/background/gorsel4.jpg)",
  "url(./img/background/gorsel5.jpg)",
  "url(./img/background/gorsel6.jpg)",
  "url(./img/background/gorsel7.jpg)",
  "url(./img/background/gorsel8.jpg)",
];
var current = 0;

$(function () {
  var body = $("#banner");

  function nextBackground() {
    body.css({
      "background-image":
        "linear-gradient(to left, rgba(0, 0, 0, .6), transparent 27%), linear-gradient(to bottom, rgba(0, 0, 0, .6), transparent 27%), linear-gradient(to right, rgba(0, 0, 0, .6), transparent 27%)," +
        backgrounds[(current = ++current % backgrounds.length)],
    });

    setTimeout(nextBackground, 5000);
  }
  setTimeout(nextBackground, 5000);
  body.css({
    "background-image":
      "linear-gradient(to left, rgba(0, 0, 0, .6), transparent 27%), linear-gradient(to bottom, rgba(0, 0, 0, .6), transparent 27%), linear-gradient(to right, rgba(0, 0, 0, .6), transparent 27%)," +
      backgrounds[0],
  });
});

Answer 1

You have several issues in your code, both in javascript and in CSS. Use setInterval instead of setTimeout because the latter just runs once. Since you're using jQuery a pratical way is to use fadeIn and fadeOut functions.

I slightly adapted your code on this running working example:

var backgrounds = [
  "https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI",
  "https://i.picsum.photos/id/793/200/300.jpg?grayscale&hmac=Iwryr2sIE-T3-CndRcI6YM0IffOLe7ovjimw6OzIzm8",
  "https://i.picsum.photos/id/1060/536/354.jpg?blur=2&hmac=0zJLs1ar00sBbW5Ahd_4zA6pgZqCVavwuHToO6VtcYY"
];
var current = 0;

(function () {
  var body = $("#banner");

  function nextBackground() {
    var url = `url(${backgrounds[(current = ++current % backgrounds.length)]})`;
    
    body.fadeOut("slow", () => {
      body.css({
        "background-image": url,
      });
      body.fadeIn("slow", () => {
      });
    });
  }
  
  nextBackground()
  setInterval(nextBackground, 5000);
})();

#banner {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner"></div>