Author: | mossetto |
---|---|
Views Total: | 1,535 views |
Official Page: | Go to website |
Last Update: | April 20, 2022 |
License: | MIT |
Preview:

Description:
Deck Slider is a responsive stacked card slider made with pure vanilla JavaScript, which means you don’t need any dependencies or frameworks like jQuery or Bootstrap.
It uses CSS3 animations and transforms to achieve a smooth, cross-browser transition effect. This slider can be easily edited via SCSS.
How to use it:
1. Add images to the slider.
<div class="slider"> <div> <img src="1.jpg"> </div> <div> <img src="2.jpg"> </div> <div> <img src="3.jpg"> </div> ... </div>
2. Add slider controls (prev & next buttons) to the bottom of the slider.
<div class="slider__control"> <div class="slider__control prev"></div> <div class="slider__control next"></div> </div>
3. Add compiled JavaScript and CSS to the page. That’s it.
<link rel="stylesheet" href="style.css" /> <script src="scripts.js"></script>
4. Override the default styles in the style.sass
.slider display: flex flex-wrap: wrap position: relative gap: 25px @media (min-width: 1200px) max-width: 1440px @media (max-width: 1200px) max-width: 768px @media (max-width: 576px) max-width: 350px &.one-card .start-deck opacity: 0 transform: translate(-15px, 0px) &__slide color: white height: 300px width: 250px border-radius: 10px position: absolute &.slide-visible position: initial z-index: 1 -webkit-box-shadow: 3px 3px 11px 0px rgba(0,0,0,0.25) box-shadow: 3px 3px 11px 0px rgba(0,0,0,0.25) &.next-transition animation: next @keyframes next 0% transform: translateX(0) 100% transform: translateX(calc( -100% - 25px )) &.prev-transition animation: prev @keyframes prev 0% transform: translateX(0) 100% transform: translateX(calc( 100% + 25px )) &.end-deck transform: translate(15px, 15px) right: 0 &.start-deck transform: translate(-15px, 15px) left: 0 &__control margin-top: 30px display: flex column-gap: 10px &.prev, &.next height: 30px width: 30px background-color: white border: 1px solid grey border-radius: 50px cursor: pointer &.disable &.prev, &.next pointer-events: none border: 1px solid lightgrey &.wait-transition pointer-events: none &.prev, &.next border: 1px solid lightgrey img width: 100% height: 100% object-fit: cover border-radius: 10px