CSS: css transition between slides similar to example

Question

I have simple code which is changing slides on click on arrows or dots.

There is no transition between changing the content of slides.

Is there any option on how to add a transition between slides like is in a link?

I already tried animation with fade in and fade out but that is not what I want. I want to make an animation similar to an example in the link. It may a little bit slide and that decreases opacity and reverse.

Is there any option how to I can get I like this?

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}

* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif;
  margin: 0
}


/* Slideshow container */

.slideshow-container {
  position: relative;
  background: #f1f1f1f1;
}


/* Slides */

.mySlides {
  display: none;
  padding: 80px;
  text-align: center;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}


/* Position the "next button" to the right */

.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
}


/* The dot/bullet/indicator container */

.dot-container {
  text-align: center;
  padding: 20px;
  background: #ddd;
}


/* The dots/bullets/indicators */

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}


/* Add a background color to the active dot/circle */

.active,
.dot:hover {
  background-color: #717171;
}


/* Add an italic font style to all quotes */

q {
  font-style: italic;
}


/* Add a blue color to the author */

.author {
  color: cornflowerblue;
}



  
    I love you the more in that I believe you had liked me for my own sake and for nothing else
    - John Keats
  

  
    But man is not made for defeat. A man can be destroyed but not defeated.
    - Ernest Hemingway
  

  
    I have not failed. I've just found 10,000 ways that won't work.
    - Thomas A. Edison
  

  ❮
  ❯

Jack · Accepted Answer

Your using display which does not accept a number, so it can't be animated by CSS. You'll need to use something like opacity or transform: translate()

Here is an example using opacity

Also consider using classList.add() and classList.remove(). They are much easier.

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].classList.remove("active");
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].classList.remove("active");
  }
  slides[slideIndex - 1].classList.add("active");
  dots[slideIndex - 1].classList.add("active");
}

* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif;
  margin: 0
}


/* Slideshow container */

.slideshow-container {
  height: 200px;
  position: relative;
  background: #f1f1f1f1;
}


/* Slides */

.mySlides {
  width: 100%;

  position: absolute;
  opacity: 0;
  padding: 80px;
  text-align: center;
  
  transition: opacity 0.25s;
}

.mySlides.active {
  opacity: 1;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}


/* Position the "next button" to the right */

.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
}


/* The dot/bullet/indicator container */

.dot-container {
  text-align: center;
  padding: 20px;
  background: #ddd;
}


/* The dots/bullets/indicators */

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}


/* Add a background color to the active dot/circle */

.dot.active,
.dot:hover {
  background-color: #717171;
}


/* Add an italic font style to all quotes */

q {
  font-style: italic;
}


/* Add a blue color to the author */

.author {
  color: cornflowerblue;
}



  
    I love you the more in that I believe you had liked me for my own sake and for nothing else
    - John Keats
  

  
    But man is not made for defeat. A man can be destroyed but not defeated.
    - Ernest Hemingway
  

  
    I have not failed. I've just found 10,000 ways that won't work.
    - Thomas A. Edison
  

  ❮
  ❯

CSS: css transition between slides similar to example

Answers (1)

Related Questions