Carousel Q

On page

The basic slideshow
Slide-in slideshow
Cross-fade slideshow
Interactive slideshow
Final tweaks

A carousel is an animated image slideshow that plays by itself and is used to show off news features or products. On this page I will take a basic model and add some improvements, to give it better looks and more function.

The basic slideshow

The basic carousel structure found at w3schools.com is very similar to the javascript lightbox (see my Lightbox Q page), but without any thumbnails to click on (although you could have thumbs underneath, instead of dots) and no fullscreen user immersion, so it fits into the page design.

Here are the parts, the html layout first...

View code

And the js...

View code

The method here is ultra simple, using js to add the 'display: block' value inline to the new slide, and just before that, all slides are killed (the line: slides[i].style.display = "none"; ) or set with no display.

An index is created at the first line, beginning at 0, and the function increments the index no. each time, by 'slideIndex++'. So on te initial run, the index no. becomes 1, An array is built of the slide divs 'mySlides' and as arrays start at 0, each slide in the array is called with the index no. minus 1 to call the correct slide (slide 1 is array 0).

In the CSS, the class 'mySlides' needs 'display: none', and the 'fade-in' class is like so...

View code

You can also use a cubic-bezier instead of 'ease-out'

View code

So what you get is the new slide fades in over a blank div area, the carousel kind of blinking as it does so (previous slide is killed without any transition out). There's no cross-fade of old and new slides.

Basic slideshow

1 / 3

Caption One

2 / 3

Caption Two

3 / 3

Caption Three

To create a slide-in effect, you need to add a transform of some kind to the 'fade' transition, so that on obtaining 'display: block' it will move into position from off-right.

View code

To make it look nice by not showing slides outside the frame, you need to add a wrapper div to the html, and in the css, give .wrapper a value 'overflow: hidden;'. Otherwise you'll see the slide divs move across the container div into position each time.

Also, use flex to keep the contents centered...

View code

Slide-in slideshow

1 / 3

Caption One

2 / 3

Caption Two

3 / 3

Caption Three

How's it look? I suppose it's fairly reasonable for a quick picture show, perhaps one that people won't stay on very long.

But what about cross-fading the slides, how can that be done using js and CSS? To begin with, you can't keep killing the active slide before each new one, as you need one to stay displayed underneath as it animates in. That means you'd have to reset 'display: none' to the old slide only after the new slide is safely displayed.

Cross-fade slideshow

1.

1 / 3

Caption One

2 / 3

Caption Two

3 / 3

Caption Three

2.

1 / 3

Caption One

2 / 3

Caption Two

3 / 3

Caption Three

3.

1 / 3

Caption One

2 / 3

Caption Two

3 / 3

Caption Three

4.

1 / 3

Caption One

2 / 3

Caption Two

3 / 3

Caption Three

In the set of slideshows above, I achieve a cross-fade by preserving the current slide with display as a new slide moves in on top.

▷ With 1 and 2, the displayed slide is removed when a second slide comes in (so when it is at one-before-previous position, two back from new). This is because the new slide takes 1sec to fully animate in and we want the previous slide to remain in the background for this short moment.

▷ With 3 and 4, I remove display from the previous slide (one back from new) and use a timer, so that the new slide can animate fully before the previous slide vanishes.

▷ With 1, 2 and 3, I use js to set 'display: block' and 'display: none', inline, with the 'fade-in' class on the 'mySlides' div, so when a slide gets 'display: block' it triggers the fade-in/slide-in animation set to the 'fade-in' class.

▷ With 4, I do it differently, setting/removing the 'fade-in' class name, with 'mySlides' class set with 'display: none'. Practically the same as 3. but 3. has a glitch at the start, with no animation until the next loop.

▷ With all of them I set new slide 'z-index: 50' (drawn after other elements) which changes to 'z-index: 0' once the underlying slide has gone. This is to prevent slide no.1 being covered by the last slide (drawn later in the DOM) when the index wraps from end to start.

And the javascript...

For no.1 above, the js uses two functions to calculate the index no.s of the two slides behind the current slide:

View code

let slideIndex = 0;
showSlides(slideIndex);

The two functions 'removeZ' and 'removeOld' run some math to find out where the previous slides are on the slide index, like if before the start it will wrap the count to the end.

No.2 above is done slightly differently, by setting variables with the fn 'getSlideHistory', of the current, previous and before-previous slide index no.s, which I think is a tidier approach:

View code

let slideIndex = 0;
showSlides(slideIndex);
let previous = null;
let beforePrevious = null;

function getSlideHistory(slideIndex, total) {
  return {
    current: slideIndex,  //make variables
    previous: (slideIndex - 1 + total) % total,
    beforePrevious: (slideIndex - 2 + total) % total
  };
}

In both 3 and 4, the current slide index no. is saved to a variable, 'oldCurrent', and it is used to set the properties of this slide when it becomes the 'previous' slide, after another slide comes in.

And because it is the index no. saved to variable, and not a calculation one back or two back from current, it will also be safe to use if the slideshow jumps to a random slide - the previous index no. will always be available.

The js for no.3 above:

View code

The js for no.4 above:

View code

Interactive slideshow

The next step is to integrate some basic controls to allow flicking through the slides using prev/next buttons. and random jumps by clicking on the dots under the slideshow.

Going backwards, the active slide needs to peel off the top showing the new slide underneath - needing a 'slide-out' animation.

Here is what I managed to develop with some help from AI. The slideshow now auto plays only after scrolling down into view, it pauses on mouse-over, and the next/previous and dots select slide.

Hole in rock

Waterfall

Blue wall

Spirals

Rock gorge

Cold ocean

Wild outdoors

Curves

Jelly fishes

Undersea

Mountains

Frozen lake

Mountain valley

Rocky mountain

Petal texture

Mountain path

building blocks

Smooth rock

Water motion

Lakeside

❮

❯

The html structure has received some elements from my lightbox, like the next/previous area and buttons, as well as the dot onClick fn.

View code

The function calls 'onmousemove' and 'onmouseleave' in the 'carousel' div call the js fn when the mouse is detected over the slideshow and when it moves off. Thus when a user wants to interact with it the thing pauses to be helpful.

'onmousemove' is slightly better than 'onmouseover' as if the mouse is already there at page load, a slight movement will trigger pause, whereas the latter needs the mouse to enter the slideshow to trigger it.

The 'plusSlides' fn, called by prev/next, for travelling up or down the slide index, carry a second argument, 'Dn' or 'Up' which is read by the js fn as 'Next' (as the slide progress will be different in each case).

The captions are extracted from the Exif comment tag of the images (see exiftag plugin).

The 'currentSlide' fn calls the slide no. with a -1 to align the 1..n index with the 0..n array of the html divs (as I changed to a 0-based slide index). This means that slide no.1 will call div no. 0 in the array of divs created by the js.

I include it on the page with..

View code

Where the file 'mycarousel.html' is the html content above this, and N is the no. of slides in the image dir or no. of images to include.

And the style sheets...

View code

/* Slideshow container */
.carousel {
  max-width:800px; 
  height: 430px;
  position: relative;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media only screen and (min-device-width: 1200px){
.carousel {
  max-width:720px; 
}}

.slide-wrapper {
  position: relative;
  margin-top: 0px;
  height: 490px;
  display: flex;
  overflow: hidden; 
   border-radius: 5px;
  outline: 3px ridge #AFAFAF;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* vertical center for images under 800px high -apply diplay:flex to parent div */
}

@media only screen and (min-device-width: 1200px){
.slide-wrapper {
  position: relative;
  height: 340px;
  width: 526px;
}}

.mySlides {
  display: none;
  position: absolute;
  top: 0;
  width: 100%;
  height: 490px;
  padding: 0px 0 5px 0; 
}
.block {
  display: block;
}

.from-right {
  display: block;
  animation: slide-in 0.3s forwards, fade-in .8s cubic-bezier(0.24,-0.09, 0.07, 0.79) backwards;
  -webkit-animation: slide-in 0.3s forwards, fade-in .8s cubic-bezier(0.24,-0.09, 0.07, 0.79) backwards;
}

.peel-right {
  display: block;
  animation: slide-out 0.5s forwards, fade-out .5s ease-out;
  -webkit-animation: slide-out 0.5s forwards, fade-out .5s ease-out;
}

/* Animation */
@keyframes fade-in {
  from {opacity: .4} to {opacity: 1}
}
@keyframes fade-out {
  from {opacity: 1} to {opacity: 0}
}

@keyframes slide-in {
  from {margin-right: -100%} to {margin-right: 0}
}
@keyframes slide-out {
  from {margin-right: 0%} to {margin-right: -210%}
}

img {vertical-align: middle;}
img.slide{
  position: relative;
  height: 100%; 
  width: 100%; 
}

@media only screen and (min-device-width: 1200px){
img.slide {
  height: 100%; 
  width: 100%; 
}}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom:0;
  width: 50%;
  user-select: none;
  -webkit-user-select: none;
  z-index: 100;
}
.prev, .prev-button{left: 0px;}   /* Position the "prev area" to the left */
.next, .next-button{right: 0;} /* Position the "next area" to the right */

/* Next & previous buttons */
.prev-button, .next-button {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 30px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

@media only screen and (min-device-width: 768px){
.prev-button, .next-button {
  font-size: 18px;
}}

/* Position the "next button" to the right */
.next-button {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev-button:hover, .next-button:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  background-color: rgba(32,61,94,0.8);
  width: 100%;
  padding: 8px 12px;
  font-size: 2rem;
  text-align: left;
  border-radius: 0 5px 5px 0;
}

@media only screen and (max-device-width: 768px){
.text {
  position: absolute;
  top: 105%;
}}

@media only screen and (min-device-width: 768px){
.text {
  position: absolute;
  font-size: 15px;
  left: 3px;
  bottom: 8px;
  width: 30%;
}}

.dots-box{
  display: none;
}

@media only screen and (min-device-width: 768px){
.dots-box{
  display: block;
  position: relative;
  bottom: 0px;
  height: 30px;
  width: fit-content; 
  margin:auto;      
}
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 6px;
  background-color: #A9ABB9 !important;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}}

.active, .dot:hover {
  background-color: #F955A9 !important;
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

The secret to the crossfade here is with these classes:

'from-right': causes 'mySlides' div (display: none') to display and animate into position
'block' : slides switch to this class after animating in from right, or when going down index (to left) so that the slide displays instantly with no animation (under the active slide)
'peel-right' : causes the previous slide to animate off the top to the right, when going down (left)
cleanup: once a slide is either covered by a new slide or it peels off out of sight, the classes are removed.

And the css animation...

View code

And my modified javascript looks like this, which displays the carousel on the page, but as yet does not start the slideshow..

let slideIndex = 0;
let Next = "1st";
let prevIndex = null;
let slides = document.getElementsByClassName("mySlides");
showSlides(slideIndex, prevIndex, Next);

function plusSlides(n, Next) {
  prevIndex = slideIndex;  // update prevIndex with active slide no. before slideIndex updates
  slideIndex = (slideIndex +n + slides.length) % slides.length;  // wrap loop using modulo %
  showSlides(slideIndex, prevIndex, Next);  // 3 arguments in the fn call
}

Notes:

'prevIndex': the variable = active slide index, and is caught before the index changes. It is used after the new slide comes in to call the previous slide (whatever index no. it was). It is passed to showSlides fn via an argument.
'Next' : the argument is passed to 'showSlides', which then catches it in an if, else if test, to find the up/down direction
'setTimeout((index)' : the 'setTimeout' fn catches the 'prevIndex' value in an enclosure, so that it is read before the timeout starts, otherwise the variable will update itself while the timeout is waiting and the wrong slide will be caught!

Important! Updated Jan 20th, 2025! When slides move FWD, both 'setTimeout's must use a closure, i.e. with both 'prevIndex' and 'slideIndex', as otherwise, with fast clicking, slides will be missed and left with display properties that will cause problems and a bad experience!

The z-index values are still necessary, so that newer slides are given drawing priority over older ones - especially so that slide 0 will display over slide n (last in the index).

The timeout is to ensure that the old slide remains displayed until the new slide transitions completely.

And here is the js to start the slideshow when the user scrolls the carourel into view..

The last 'isInViewport' at the bottom, which calls the fn that starts the carousel, is needed in case the page is refreshed when already scrolled to the carousel, so that it will start without any scroll event to trigger it.

The js to pause the slideshow when the mouse hovers the carourel..

Final tweaks

Well, I took the js a little further, amalgamating the 'plusSlides' and 'currentSlide' fn's with their 'if/else if' tests into 'showSlides' to create 'getSlide'. What a task!!

It works the same and might look tidier, hopefully not more complex?

The html structure changed very slightly, as you can see (note 'getSlide' and the second arg 'Rm' with the dots fn call)...

View code

The new js....

slideIndex = 0;
var prevIndex = null;
var Next = "1st";
getSlide(0, Next);

// SHOW
		
function getSlide(n, Next) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  prevIndex = slideIndex;  // update prevIndex with active slide no. before slideIndex updates
  
  if (Next === "1st") { slideIndex = 0}
  else if (Next === "Up" || Next === "Dn") {   // either 'Up' or 'Dn'
  slideIndex = (slideIndex +n + slides.length) % slides.length;  // wrap loop using modulo %
	 }
  else if (Next = "Rm"){  // random click on dots
     if  (n > slideIndex) { Next = "Up"} // if slide is higher than active
     else if (n < slideIndex) { Next = "Dn"} // if slide is lower
	 	slideIndex = n; 
	}
    
  for (i = 0; i < dots.length; i++) {
   dots[i].className = dots[i].className.replace(" active", "");   }
   dots[slideIndex].className += " active";
  
			// -> START
  
  if (Next === "1st") {
	slides[slideIndex].classList.add("from-right"); 
      setTimeout(() => {
	    slides[slideIndex].classList.add("block");   // switch active slide class to block
	    slides[slideIndex].classList.remove("from-right"); 
     }, 800);
  }
  
			// -> FWD
  
  else if (Next === "Up") {
	slides[slideIndex].classList.add("from-right");  // new slide from right
    slides[slideIndex].style.zIndex = "10";
    
      setTimeout((index) => {
	    slides[index].classList.remove("block");   // clear previous
     }, 800, prevIndex);
     
      setTimeout((index) => {
        slides[index].style.zIndex = "0";
	    slides[index].classList.add("block");   // switch active slide class to block
	    slides[index].classList.remove("from-right"); 
	  }, 800, slideIndex);
  }  
  
			// -> BKWD
  
  else if (Next === "Dn") { // going backwads
	slides[slideIndex].classList.add("block");  // new slide under previous
	
    slides[prevIndex].style.zIndex = "10";
	slides[prevIndex].classList.add("peel-right");  // peel off previous
	  
      setTimeout((index) => {
	   slides[index].classList.remove("peel-right");  // clear previous
	   slides[index].classList.remove("block"); 
       slides[index].style.zIndex = "0";
     }, 800, prevIndex);
  }
}

let timerOn = false;

function isInViewport() {
  const ele = document.querySelector(".carousel");
  const rect = ele.getBoundingClientRect();
  if (rect.top >= 0 && rect.bottom <= window.innerHeight && rect.left >= 0 && rect.right <= window.innerWidth) {
	  if (!timerOn) timer();
  }
};

function timer() { 
  timerId = setInterval("getSlide(1, 'Up')", 3000); 
  timerOn = true;
}

window.addEventListener('scroll', function (event) {
  isInViewport();
}) ;

isInViewport();

function pause() {  // called by html tag
  clearInterval(timerId);
  paused = true;
  }
  
function restart() { 
  if (paused == true) {
	timerId = setInterval("getSlide(1, 'Up')", 3000); 
	}
  paused = false;
}