Issue creating a carousel with html CSS and javascript

Question

I'm trying to create a carousel using just HTML, CSS and JS.

It works, but not as well as I was hoping for.

When it finishes one round of images, it takes roughly 8 seconds to start showing the images from the first to the last one, and then it stops again for several seconds and so on...

Additionally, the div containing the background-images is 100% width and 100vh height. I've tried to set the background properties like bg-repeat, bg-size, bg-position, but I can't manage to get the images to display well on the screen - They images become cropped when set background-size: cover, and become too small if I set background-size: contain; or another property.

Can you please check this "working" demo? Thanks.

var divi = document.querySelector(".divi");
srcArr = ["https://picsum.photos/id/237/200/300", "https://picsum.photos/id/238/200/300", "https://picsum.photos/id/239/200/300", "https://picsum.photos/id/240/200/300"];
var iter = 0;

setInterval(function() {
  if (iter == (srcArr.length)) {
    iter = 0;
  } else {
    divi.style.backgroundImage = "url('" + srcArr[iter] + "')";
    iter++;
  }
}, 4000);

* {
  padding: 0;
  margin: 0
}

.divi {
  width: 100%;
  height: 100vh;
  background-image: url("https://picsum.photos/id/240/200/300");
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

<div class="divi"></div>

The question doesn't seem to be clear, are you asking to why the slider takes time to transition? — Luay
– Luay, Commented May 10, 2019 at 1:30
Every four seconds, you run this if statement: if (iter == (srcArr.length)). Only if it is false do you change the image: divi.style.backgroundImage = "url('" + srcArr[iter] + "')";. This means that, if that statement is true, the image will not change for another 4 seconds. — Tyler Roper
– Tyler Roper, Commented May 10, 2019 at 3:03
you have to put all your images in mémory, and switch them by changing class where each one has is own background image, or use URL.createObjectURL — Mister Jojo
– Mister Jojo, Commented May 10, 2019 at 3:10

Mister Jojo · Accepted Answer · 2019-05-10 03:20:45Z

1

As Tyler Roper says, when (iter == srcArr.length) iter go on zero value but didn't change the image, so for the next one they wait 4 seconds more.

const
  divi   = document.querySelector(".divi"),
  srcArr = ["https://picsum.photos/id/237/200/300", "https://picsum.photos/id/238/200/300", "https://picsum.photos/id/239/200/300", "https://picsum.photos/id/240/200/300"];
var iter = -1;

setInterval(function() {
  iter = (iter + 1) % srcArr.length;
  divi.style.backgroundImage = "url('" + srcArr[iter] + "')";
}, 4000);

* {
  padding: 0;
  margin: 0
}

.divi {
  width: 100%;
  height: 100vh;
  background-image: url("https://picsum.photos/id/240/200/300");
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

<div class="divi"></div>

answered May 10, 2019 at 3:20

Mister Jojo

23k6 gold badges28 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tyler Roper · Accepted Answer · 2019-05-10 03:38:57Z

Every four seconds, you run an if statement, and only if it evaluates to false do you change the image. That means that each time it evaluates to true (when it gets to the end of the array), it has to run through two iterations to continue (which in this case takes 8 seconds).

Personally, I prefer to put things like this in functions, and using a recurring setTimeout over a setInterval. I've also returned that timeout in the event you want to stop the slideshow at some point.

In regards to your background, that's a pretty broad question. For starters, I've just applied background-position: center;.

const divi = document.querySelector(".divi");
const srcArr = ["https://picsum.photos/id/237/200/300","https://picsum.photos/id/238/200/300","https://picsum.photos/id/239/200/300", "https://picsum.photos/id/240/200/300"];
const timer = 1000;

const nextImg = (imageArray, index) => {
  divi.style.backgroundImage = `url('${imageArray[index]}')`;
  index = ++index % imageArray.length;
  return setTimeout(()=>nextImg(imageArray, index), timer);
};

const startSlideshow = imageArray => nextImg(imageArray,0); 

//Start slideshow
const slideshow = startSlideshow(srcArr);

//Stop slideshow
//clearTimeout(slideshow);

* {
  padding: 0;
  margin: 0
}

.divi {
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
}

<div class="divi"></div>

Collectives™ on Stack Overflow

Issue creating a carousel with html CSS and javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related