Slider 3D

css3 JS PURE

by Marcos vini

HTML

<main>

    <div id="carousel">

       <div class="hideLeft">
        <img src="https://i.imgur.com/4ai0Ep5.jpg">
      </div>

      <div class="prevLeftSecond">
        <img src="https://i.imgur.com/b06UXh6.jpg">
      </div>

      <div class="prev">
        <img src="https://i.imgur.com/a09Bat6.jpg">
      </div>

      <div class="selected">
        <img src="https://i.imgur.com/BwEjnss.jpg">
      </div>

      <div class="next">
        <img src="https://i.imgur.com/CzoCXXB.jpg">
      </div>

      <div class="nextRightSecond">
        <img src="https://i.imgur.com/WixdLpY.jpg">
      </div>

      <div class="hideRight">
        <img src="https://i.imgur.com/sySpPjp.jpg">
      </div>

    </div>

    <div class="buttons">
      <button id="prev">Anterior</button>
      <button id="next">Proximo</button>
    </div>

  </main>

CSS

html, body, main {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#carousel {
  position: relative;
  height: 400px;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}
#carousel div {
  position: absolute;
  transition: transform 1s, left 1s, opacity 1s, z-index 0s;
  opacity: 1;
}
#carousel div img {
  width: 400px;
  transition: width 1s;
}
#carousel div.hideLeft {
  left: 0%;
  opacity: 0;
  transform: translateY(50%) translateX(-50%);
}
#carousel div.hideLeft img {
  width: 200px;
}
#carousel div.hideRight {
  left: 100%;
  opacity: 0;
  transform: translateY(50%) translateX(-50%);
}
#carousel div.hideRight img {
  width: 200px;
}
#carousel div.prev {
  z-index: 5;
  left: 30%;
  transform: translateY(50px) translateX(-50%);
}
#carousel div.prev img {
  width: 300px;
}
#carousel div.prevLeftSecond {
  z-index: 4;
  left: 15%;
  transform: translateY(50%) translateX(-50%);
  opacity: 0.7;
}
#carousel div.prevLeftSecond img {
  width: 200px;
}
#carousel div.selected {
  z-index: 10;
  left: 50%;
  transform: translateY(0px) translateX(-50%);
}
#carousel div.next {
  z-index: 5;
  left: 70%;
  transform: translateY(50px) translateX(-50%);
}
#carousel div.next img {
  width: 300px;
}
#carousel div.nextRightSecond {
  z-index: 4;
  left: 85%;
  transform: translateY(50%) translateX(-50%);
  opacity: 0.7;
}
#carousel div.nextRightSecond img {
  width: 200px;
}

.buttons {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
}

JavaScript

function moveToSelected(element) {
  if (element == "next") {

   var selected = document.querySelector(".selected").nextElementSibling;

  } else if (element == "prev") {
 
    var selected =  document.querySelector(".selected").previousElementSibling;
  } else {
    var selected = element;
  }

  var next = selected.nextElementSibling;
  var prev = selected.previousElementSibling;
  var prevSecond = prev.previousSibling;
  var nextSecond = next.nextSibling;
  

function matches(elem, filter) {
  if (elem && elem.nodeType === 1) {
    if (filter) {
      return elem.matches(filter);
    }
    return true;
  }
  return false;
}


function getNextSiblings(elem, filter) {
  var sibs = [];
  while (elem = elem.nextSibling) {
    if (matches(elem, filter)) {
      sibs.push(elem);
    }
  }
  return sibs;
}

function getPreviousSiblings(elem, filter) {
  var sibs = [];
  while (elem = elem.previousSibling) {
    if (matches(elem, filter)) {
      sibs.push(elem);
    }
  }
  return sibs;
}



	
  selected.removeAttribute('class');
    prev.removeAttribute('class');
  next.removeAttribute('class');
    selected.classList.add("selected");
     prev.classList.add("prev");
  next.classList.add("next");


  prevSecond.removeAttribute('class');
  nextSecond.removeAttribute('class').classList.add("nextRightSecond");
prevSecond.classList.add("prevLeftSecond");
 var x = getNextSiblings(nextSecond);	

var p = getPreviousSiblings(prevSecond);
 for (var i = 0; i < x.length; i++) {
 	 x[i].removeAttribute('class');
 x[i].classList.add("hideRight");
 }
 for (var i = 0; i < p.length; i++) {
 	 p[i].removeAttribute('class');
 p[i].classList.add("hideLeft");
 }
 
  

 // $(nextSecond).nextAll().removeClass().addClass('hideRight');
  //$(prevSecond).prevAll().removeClass().addClass('hideLeft');

}




document.body.addEventListener("keydown", function (e) { 
   switch(e.which) {
        case 37: // left
        moveToSelected('prev');
        break;

        case 39: // right
       ...