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