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;

function prev() {

	   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;
	  }
}

function next() {

   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 second

function play() {
	next();
	playInterval = setTimeout(play,PlayTimer);
}

function stop() {
    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 1s 1;
  -moz-animation: comein 1s 1;
  animation: comein 1s 1;
  animation-fill-mode: both;
}
@keyframes comein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.out {
  -webkit-animation: goout 1s 1;
  -moz-animation: goout 1s 1;
  animation: goout 1s 1;
  animation-fill-mode: both;
}
@keyframes goout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div>
  <div class="slide in">1st Slide content</div>
  <div class="slide">2nd Slide content</div>
  <div class="slide">3rd Slide content</div>
  <div class="slide">4th Slide content</div>
</div>

<button onclick="prev();">Prev</button>
<button onclick="next();">Next</button>
<button onclick="play();">Play</button>
<button onclick="stop();">Stop</button>