Simple Slider

by Matheus Stein

HTML

<div id="sliderHolder">
  <div class="frame f1 fOn"></div>
  <div class="frame f2 fOff"></div>
  <div class="frame f3 fOff"></div>
  <div class="frame f4 fOff"></div>
  <div class="frame f5 fOff"></div>
  <div class="frame f6 fOff"></div>
</div>

<div id="sliderDotsHolder">
  <span class="dot dOn" onClick="thisFrame(0)"></span>
  <span class="dot dOff" onClick="thisFrame(1)"></span>
  <span class="dot dOff" onClick="thisFrame(2)"></span>
  <span class="dot dOff" onClick="thisFrame(3)"></span>
  <span class="dot dOff" onClick="thisFrame(4)"></span>
  <span class="dot dOff" onClick="thisFrame(5)"></span>
</div>

<button onClick="nextFrame(); autoChangeFrame=0;">
Next Frame
</button>

<button onClick="prevFrame()">
Prev Frame
</button>

CSS

/* Animations */

	@keyframes opacityUp {
		from {opacity:0;}
		to {opacity:1;}
	}
	@keyframes opacityDown {
		from {opacity:1;}
		to {opacity:0;}
	}
  body {background:black;}


	@keyframes slideDotOn {
		from {background:rgba(255,255,255,1);box-shadow: 0 0 0 1px rgba(255,255,255,0)}
		to {background:rgba(255,255,255,0);box-shadow: 0 0 0 1px rgba(255,255,255,1)}
	}
	@keyframes slideDotOff {
		from {background:rgba(255,255,255,0);box-shadow: 0 0 0 1px rgba(255,255,255,1)}
		to {background:rgba(255,255,255,1);box-shadow: 0 0 0 1px rgba(255,255,255,0)}
	}

/* ... */

#sliderHolder {
  display:inline-block;
  width:600px;
  height:400px;
  position:relative;
}

  .frame {
     display:inline-block;
     position:absolute;
     top:0;
     left:0;
     right:0;
     bottom:0;
  }
  
  .fOn {
    animation: opacityUp .4s forwards;
  }
  
  .fOff {
    animation: opacityDown .4s forwards;
  }
  
    .f1 {
      background:url('https://i.pinimg.com/564x/0d/6d/b0/0d6db086561782725b6c277ff1fbb17a.jpg');
      background-size:cover; background-position: center center;
    }
    .f2 {
      background:url('https://i.pinimg.com/564x/ae/08/94/ae0894c3a5700b77f933825c1a6c0642.jpg');
      background-size:cover; background-position: center center;
    }
    .f3 {
      background:url('https://i.pinimg.com/564x/32/11/9a/32119ab62f04b20ff487e564d1a612c7.jpg');
      background-size:cover; background-position: center center;
    }
    .f4 {
      background:url('https://i.pinimg.com/564x/83/7b/a3/837ba330f9cb65c151e0da9e410a9d6f.jpg');
      background-size:cover; background-position: center center;
    }
    .f5 {
      background:url('https://i.pinimg.com/564x/0c/ef/5e/0cef5e27836b9a93bf943b9f6c1211db.jpg');
      background-size:cover; background-position: center center;
    }
    .f6 {
      background:url('https://i.pinimg.com/564x/83/7b/a3/837ba330f9cb65c151e0da9e410a9d6f.jpg');
      background-size:cover; background-position: center center;
    }
    

#sliderDotsHolder {
...

JavaScript

var frameNumber;
frameNumber = document.getElementsByClassName('frame').length;
var currentFrame;
currentFrame=0;
var autoChangeFrame;
autoChangeFrame=1;



function autoChangeFrameF() {
	setTimeout(function(){
		if (autoChangeFrame==1) {
    	nextFrame();
      autoChangeFrameF();
    }
  }, 5000);
}

autoChangeFrameF();

function nextFrame() {
    
    document.getElementsByClassName('frame')[currentFrame].classList.remove("fOn");
    document.getElementsByClassName('frame')[currentFrame].classList.add("fOff");
    
    document.getElementsByClassName('dot')[currentFrame].classList.remove("dOn");
    document.getElementsByClassName('dot')[currentFrame].classList.add("dOff");
    
	  currentFrame+=1;  
    if (currentFrame >= frameNumber) {currentFrame=0;}

    document.getElementsByClassName('frame')[currentFrame].classList.remove("fOff");
    document.getElementsByClassName('frame')[currentFrame].classList.add("fOn");
    
    document.getElementsByClassName('dot')[currentFrame].classList.remove("dOff");
    document.getElementsByClassName('dot')[currentFrame].classList.add("dOn"); 
    
}

function prevFrame() {
    
    document.getElementsByClassName('frame')[currentFrame].classList.remove("fOn");
    document.getElementsByClassName('frame')[currentFrame].classList.add("fOff");
    
    document.getElementsByClassName('dot')[currentFrame].classList.remove("dOn");
    document.getElementsByClassName('dot')[currentFrame].classList.add("dOff");
    
	  currentFrame-=1;  
    if (currentFrame < 0) {currentFrame=frameNumber-1;}

    document.getElementsByClassName('frame')[currentFrame].classList.remove("fOff");
    document.getElementsByClassName('frame')[currentFrame].classList.add("fOn");
    
    document.getElementsByClassName('dot')[currentFrame].classList.remove("dOff");
    document.getElementsByClassName('dot')[currentFrame].classList.add("dOn");
      
    autoChangeFrame=0;
}

function thisFrame(n) {
    
   ...