Basic Auto Rotating Card Slider With JavaScript And CSS3

Preview:

Description:

A pure JavaScript slider component which uses CSS3 transitions and transforms to rotate through a group of card elements while highlighting the current slide.

How to use it:

Add card element to the slider and specify the initial slide using the CSS class ‘active’.

<div class="container">
  <div class="card"></div>
  <div class="card active"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>
<script>

The basic CSS styles for the card slider.

.container {
  position: relative;
  background: black;
  max-width: 650px;
  min-width: 650px;
  height: 410px;
  margin: 0 auto;
  overflow: hidden;
}
.card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: 340px;
  height: 300px;
  background: red;
  margin: 5px;
  transition: transform 0.5s, background 0.3s ease-in-out;
}
.reset .card { transition: none; }

Set the CSS styles to the active slide:

.active {
  background: yellow;
  transform: translate(-50%, -50%) scale(1.1) !important;
}

Apply smooth transition effects to the slides when sliding.

.card:nth-child(1) { transform: translate(-170%, -50%); }
.card:nth-child(2) { transform: translate(-50%, -50%); }
.card:nth-child(3) { transform: translate(70%, -50%); }
.card:nth-child(4) { transform: translate(190%, -50%); }
.next .card:nth-child(1) { transform: translate(-290%, -50%); }
.next .card:nth-child(2) { transform: translate(-170%, -50%); }
.next .card:nth-child(3) { transform: translate(-50%, -50%); }
.next .card:nth-child(4) { transform: translate(70%, -50%); }
.reset .card .card:nth-child(1) { transform: translate(-170%, -50%); }
.reset .card .card:nth-child(2) { transform: translate(-50%, -50%); }
.reset .card .card:nth-child(3) { transform: translate(70%, -50%); }
.reset .card .card:nth-child(4) { transform: translate(190%, -50%); }

The main JavaScript to active the card slider.

let holder = document.querySelectorAll('.container')[0],
    cards = document.querySelectorAll('.card');
let preActiveCard = cards[1];
let nextActiveCard = cards[2];
function scrollLeft() {
  holder.classList.remove('next');
  holder.classList.remove('reset');
  holder.classList.add('next');
  
  preActiveCard.classList.remove('active');
  nextActiveCard.classList.add('active');
  setTimeout(reset, 600);
}
function reset() {
  holder.classList.remove('next');
  holder.classList.add('reset');
  preActiveCard.classList.add('active');
  nextActiveCard.classList.remove('active');
}
setInterval(scrollLeft, 1500);