Author: | nashvail |
---|---|
Views Total: | 7,728 views |
Official Page: | Go to website |
Last Update: | January 21, 2017 |
License: | MIT |
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);