css animation not working with javascript code

Question

I am trying to make a automatic Javascript Slideshow with fading animation based on w3 css that switches to manual when you hit the arrows. Besides this, in the beginning, if the previous or next arrows are not clicked, the slideshow will run for 2 loops. Clicking the previous or next arrows before 2 loops of slideshow finish also switches the slideshow to manual.

The issue is with the W3 Css fading animation. If I keep it, at the end of the automatic loops, the slides keep fading in and fading out while it should remain static. So, I have to remove the fading animation using the following code -

 Array.prototype.forEach.call(x, function(element) {
     element.classList.remove("w3-animate-fading"); //remove the fading
     });

Please point what am I doing wrong that the animation is not working properly with javascript (Please note - I am new to Javascript). Here is the full snippet including the remove animation code -

var index = 1;
var paused = false;
var slideShow = [];
var counter = 0;
var maxLength = 0;
var loops = 2;
var interval = 2000; //for testing purposes

 var x = document.getElementsByClassName("slideShow");
 maxLength = x.length * loops; //times 2 for two loops
 
for (i=0; i slideShow.length) {
    index = 1;
  }
  else if (index+n <= 0) {
    index = slideShow.length;
  }
  else {
		index += n;
  }
  showDivs();
}

function showDivs() {
  //Hide all slideShow elements, and then show only the targeted element
  for (i=1; i<=slideShow.length; i++) {
    slideShow[i-1].style.display = "none";
  }
  slideShow[index-1].style.display = "block";
}

.w3-content.w3-display-container {
  margin-top: 100px;
}
 
 button.w3-button.w3-display-left.w3-black {
  position: relative;
  left: -50px;
}
 
 button.w3-button.w3-display-right.w3-black {
  position: relative;
  right: -118px;
}




  
      
      
      
      
        Slide-1 (read more)
    
  

  
        
    
    	
    
        Slide-2 (more)
    
  

  
        
    
    
        
        Slide-3 (read more)
        
    

  
        
    
    
        
        Slide-4 (read more)
        
  

  
      
      
      
        
        Slide-5 (read	more)

Suriya Subramaniyan · Accepted Answer

Remove this,

 Array.prototype.forEach.call(x, function(element) {
 element.classList.remove("w3-animate-fading"); //remove the fading
 });

and add and remove fade class for active slide conditionally,

slideShow[0].className = "w3-animate-fading slideShow";
slideShow[index-1].className = "w3-animate-fading slideShow";

See snippet

var index = 1;
var paused = false;
var slideShow = [];
var counter = 0;
var maxLength = 0;
var loops = 2;
var interval = 2000; //for testing purposes

 var x = document.getElementsByClassName("slideShow");
 maxLength = x.length * loops; //times 2 for two loops
 
for (i=0; i slideShow.length) {
    index = 1;
  }
  else if (index+n <= 0) {
    index = slideShow.length;
  }
  else {
		index += n;
  }
  showDivs();
}

function showDivs(value) {
  //Hide all slideShow elements, and then show only the targeted element
  for (i=1; i<=slideShow.length; i++) {
    slideShow[i-1].style.display = "none";
  }
  slideShow[index-1].style.display = "block";
  
  if(value) { // Here check the condition if loop ends remove fade class from slide
  
      slideShow[index-1].classList.remove("w3-animate-fading");
      
  } else {  // otherwise add fade class to slide
         
      slideShow[index-1].className = "w3-animate-fading";
      
       // after that remove class after some time for remove fade
      setTimeout(function(){
          slideShow[index-1].classList.remove("w3-animate-fading");
      },1000);
  }
}

.w3-content.w3-display-container {
  margin-top: 100px;
}
 
 button.w3-button.w3-display-left.w3-black {
  position: relative;
  left: -50px;
}
 
 button.w3-button.w3-display-right.w3-black {
  position: relative;
  right: -118px;
}




  
      
      
      
      
        Slide-1 (read more)
    
  

  
        
    
    	
    
        Slide-2 (more)
    
  

  
        
    
    
        
        Slide-3 (read more)
        
    

  
        
    
    
        
        Slide-4 (read more)
        
  

  
      
      
      
        
        Slide-5 (read	more)

css animation not working with javascript code

Answers (1)

Related Questions