How can i add a smooth transition effect between slides?

Question

Im not that good at coding but i try some ways to put a transition effect but didint work. Can you guys help me ?I will appreciate it a lot..........................................................................................................................................................................................................................................................................................................

Java

let sliderImages = document.querySelectorAll(".slide"),
  arrowLeft = document.querySelector("#arrow-left"),
  arrowRight = document.querySelector("#arrow-right"),
  current = 0;

// Clear all images
function reset() {
  for (let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
  }
}

// Init slider
function startSlide() {
  reset();
  sliderImages[0].style.display = "block";
}

// Show prev
function slideLeft() {
  reset();
  sliderImages[current - 1].style.display = "block";
  current--;
}

// Show next
function slideRight() {
  reset();
  sliderImages[current + 1].style.display = "block";
  current++;
}

// Left arrow click
arrowLeft.addEventListener("click", function() {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

// Right arrow click
arrowRight.addEventListener("click", function() {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});

startSlide();

css

body,
#slider,
.wrap,
.slide-content {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

.wrap {
  position: relative;
}

.slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* .slide-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
} */

.delimitare {
  background-color: r#141313ed;
  width: 100%;
  height: 100%;
  padding-left: 10%;
  padding-right: 10%;
}

.content-interior {
  background-color: #141313;
  width: 100%;
  height: 100%;
}

.slide-content span {
  font-size: 5rem;
  color: #fff;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -35px;
  width: 0;
  height: 0;
  border-style: solid;
}

#arrow-left {
  border-width: 30px 40px 30px 0;
  border-color: transparent #fff transparent transparent;
  left: 0;
  margin-left: 30px;
}

#arrow-right {
  border-width: 30px 0 30px 40px;
  border-color: transparent transparent transparent #fff;
  right: 0;
  margin-right: 30px;
}

html


        
        
          
            
              
              
            
          
          
            
              Image Two
            
          
          
            
              Image Three

user_15396865 · Answer

So far you're doing well! There's a lot of different ways to accomplish a fading slide, but the CSS "transition" property is an easy way to do it.

The problem here, though, is that you cannot transition the "display" property. Going from "display: block" to "display: none" cannot be transitioned. It either displays or doesn't. On or off, like a boolean.

I have put together a working example by updating the code you provided. Instead of using display to switch between slides, I updated it to change the opacity instead. Opacity can be transitioned, so I added the CSS to handle that as well.

(I also had to set the slide position to absolute so the slides stacked on top of each other.)

Quick side note: when you initially shared your code, you labeled your JavaScript as "Java". Java and JavaScript are two different coding languages so be careful with that in the future.

let sliderImages = document.querySelectorAll(".slide"),
  arrowLeft = document.querySelector("#arrow-left"),
  arrowRight = document.querySelector("#arrow-right"),
  current = 0;

// Clear all images
function reset() {
  for (let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.opacity = "0";
  }
}

// Init slider
function startSlide() {
  reset();
  sliderImages[0].style.opacity = "1";
}

// Show prev
function slideLeft() {
  reset();
  sliderImages[current - 1].style.opacity = "1";
  current--;
}

// Show next
function slideRight() {
  reset();
  sliderImages[current + 1].style.opacity = "1";
  current++;
}

// Left arrow click
arrowLeft.addEventListener("click", function () {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

// Right arrow click
arrowRight.addEventListener("click", function () {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});

startSlide();

body,
#slider,
.wrap,
.slide-content {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  background-color: blue;
}

.wrap {
  position: relative;
}

.slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

.slide-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.delimitare {
  background-color: r#141313ed;
  width: 100%;
  height: 100%;
  padding-left: 10%;
  padding-right: 10%;
}

.content-interior {
  background-color: #141313;
  width: 100%;
  height: 100%;
}

.slide-content span {
  font-size: 5rem;
  color: #fff;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -35px;
  width: 0;
  height: 0;
  border-style: solid;
  z-index: 2;
}

#arrow-left {
  border-width: 30px 40px 30px 0;
  border-color: transparent #fff transparent transparent;
  left: 0;
  margin-left: 30px;
}

#arrow-right {
  border-width: 30px 0 30px 40px;
  border-color: transparent transparent transparent #fff;
  right: 0;
  margin-right: 30px;
}


  
  
  
    
      
        Image One
      
    
    
      
        Image Two
      
    
    
      
        Image Three

How can i add a smooth transition effect between slides?

1 Answers