Slider in JavaScript

by webspicer

HTML

<h1> Moving Div Position </h1>

<div class="containerWrapper" id="mainwrapper">

	<button type="button" class="moveup" onclick="moveup();"> &uArr; </button>
	
	<div class="centerWrapper">
	
		<div class="child-contianer active"> <h2> First Container </h2> </div>
		<div class="child-contianer"> <h2> Second Container </h2> </div>
		<div class="child-contianer"> <h2> Third Container </h2> </div>
		
	</div>
	
	<button type="button" class="movedown" onclick="movedown();"> &dArr; </button>

</div>

CSS

* { font-family: tahoma; padding: 0; margin: 0; outline: 0; }
h1{ font-size: 20px; color: #F88C00; margin: 10px 5px; }
.containerWrapper { width: 95%; border: 3px solid #494949; min-height: 350px; margin: 20px auto; padding: 10px; }
.containerWrapper div { position: relative; border: 1px solid #242424; padding: 10px; width: 150px; margin: 10px 0;}
.containerWrapper div.centerWrapper{ width: 500px; height: 350px; margin: 0 auto; border: 1px solid green; overflow: hidden}
.containerWrapper div.centerWrapper div { width: 450px; height: 315px; display: inline-block }

button { padding: 10px 15px; font-size; 12px; font-weight: 700; color: #494949; cursor: pointer; border: 1px solid #494949; }
button:hover { color: #fff; background: #494949; }
button:first-child {float: left; position: relative; top: 150px; left: 100px;}
button:last-child {float: right; position: relative; top: -220px; right: 100px;}

h2 {font-size: 16px; color: #F88C00; }

.containerWrapper div.centerWrapper div.child-contianer {display: none;}
.containerWrapper div.centerWrapper div.child-contianer.active {display: block;}

JavaScript

function movedown() {
	var active = document.getElementsByClassName("active");
	
	var activeNext = active[0].nextElementSibling;
	
	if( activeNext ){
		active[0].className = 'child-contianer';
		activeNext.className = 'active';
	} 
}

function moveup() {
	var active = document.getElementsByClassName("active");
	
	var activePrev = active[0].previousElementSibling;
	
	if( activePrev ){
		active[0].className = 'child-contianer';
		activePrev.className = 'active';
	}
}