How Make Slide To Auto Play And Change Swap To Fade In Javascript

Hi guys I am new in JavaScript I have a image slider here I want the Image Slider to auto play and change swap to fade effect. How can I change this? My current JavaScript code is

Solution 1:

You can use CSS animation for that and switch between the slides with javascript. I wrote this code for you and you can use play, stop, next and prev button to navigate. You can use img tag inside slide div if you like image inside your slide.

var slideIn = 0;

functionprev() {

	   var slide = document.querySelectorAll('.slide'), 
	   	   prevSlide = (typeof slide[slideIn-1] !== 'undefined')? slideIn-1 : slide.length-1;
	  
	  if (slide[prevSlide] && slide[slideIn]){
	  	slide[slideIn].className = 'slide out';
	  	slide[prevSlide].className = 'slide in';
	  	slideIn = prevSlide;
	  }
}

functionnext() {

   var slide = document.querySelectorAll('.slide'), 
   	   nextSlide = (typeof slide[slideIn+1] !== 'undefined')? slideIn+1 : 0;
  
  if (slide[nextSlide] && slide[slideIn]){
  	slide[slideIn].className = 'slide out';
  	slide[nextSlide].className = 'slide in';
  	slideIn = nextSlide;
  }
}

var playInterval,
	PlayTimer = 1000; // 1 secondfunctionplay() {
	next();
	playInterval = setTimeout(play,PlayTimer);
}

functionstop() {
    clearTimeout(playInterval);
}

body {
  padding: 0;
  margin: 0;
  font-family: tahoma;
  font-size: 8pt;
  color: black;
}
div {
  height: 30px;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}
div>div {
  opacity: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.in {
  -webkit-animation: comein 1s1;
  -moz-animation: comein 1s1;
  animation: comein 1s1;
  animation-fill-mode: both;
}
@keyframes comein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.out {
  -webkit-animation: goout 1s1;
  -moz-animation: goout 1s1;
  animation: goout 1s1;
  animation-fill-mode: both;
}
@keyframes goout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div><divclass="slide in">1st Slide content</div><divclass="slide">2nd Slide content</div><divclass="slide">3rd Slide content</div><divclass="slide">4th Slide content</div></div><buttononclick="prev();">Prev</button><buttononclick="next();">Next</button><buttononclick="play();">Play</button><buttononclick="stop();">Stop</button>