Author: | Mikael Ainalem |
---|---|
Views Total: | 273 views |
Official Page: | Go to website |
Last Update: | June 5, 2018 |
License: | MIT |
Preview:

Description:
A fashion card slider with a tab-like navigation that enables the user to slides between cards by clicking the tabs. Built with JavaScript, CSS/CSS3, and SVG clip-path.
How to use it:
The HTML structure for the card slider.
<div class="slider"> <div class="card"> <div class="card__contents"> <div class="card__title">Card 1</div> <div class="card__body"> <p>Card 1 Content</p> </div> <div class="card__next">next →</div> </div> <div class="card__shadow"> <div class="card__shadow-inner"></div> </div> <div class="card__index">1</div> </div> <div class="card"> <div class="card__contents"> <div class="card__title">Card 2</div> <div class="card__body"> <p>Card 2 Content</p> </div> <div class="card__next">next →</div> </div> <div class="card__shadow"> <div class="card__shadow-inner"></div> </div> <div class="card__index">2</div> </div> <div class="card"> <div class="card__contents"> <div class="card__title">Card 3</div> <div class="card__body"> <p>Card 3 Content</p> </div> <div class="card__next">next →</div> </div> <div class="card__shadow"> <div class="card__shadow-inner"></div> </div> <div class="card__index">3</div> </div> <div class="card"> <div class="card__contents"> <div class="card__title">Card 4</div> <div class="card__body"> <p>Card 4 Content</p> </div> <div class="card__next">next →</div> </div> <div class="card__shadow"> <div class="card__shadow-inner"></div> </div> <div class="card__index">4</div> </div> <div class="card"> <div class="card__contents"> <div class="card__title">Card 5</div> <div class="card__body"> <p>Card 5 Content</p> </div> </div> <div class="card__shadow"> <div class="card__shadow-inner"></div> </div> <div class="card__index">5</div> </div> </div>
The necessary CSS/CSS3 rules for the card slider.
.phone { background: white; height: 100%; max-width: 360px; overflow: hidden; position: relative; width: 100%; } .card { height: 100%; position: absolute; text-align: center; transition: transform 300ms; width: 100%; } .card:nth-child(2) { transform: translateX(100%); } .card:nth-child(3) { transform: translateX(100%); } .card:nth-child(4) { transform: translateX(100%); } .card:nth-child(5) { transform: translateX(100%); } .card__contents { align-items: center; display: flex; flex-direction: column; height: 100%; position: absolute; top: 0; width: 100%; } .card:nth-child(1) .card__contents { background: #fff; } .card:nth-child(2) .card__contents { background: #C9F9E1; -webkit-clip-path: polygon(10% 0%, 10% 20%, 0% 20%, 0% 100%, 100% 100%, 100% 0%); clip-path: polygon(10% 0%, 10% 20%, 0% 20%, 0% 100%, 100% 100%, 100% 0%); } .card:nth-child(3) .card__contents { background: #F9C9C7; -webkit-clip-path: polygon(10% 0%, 10% 40%, 0% 40%, 0% 100%, 100% 100%, 100% 0%); clip-path: polygon(10% 0%, 10% 40%, 0% 40%, 0% 100%, 100% 100%, 100% 0%); } .card:nth-child(4) .card__contents { background: #F9F0C7; -webkit-clip-path: polygon(10% 0%, 10% 60%, 0% 60%, 0% 100%, 100% 100%, 100% 0%); clip-path: polygon(10% 0%, 10% 60%, 0% 60%, 0% 100%, 100% 100%, 100% 0%); } .card:nth-child(5) .card__contents { background: #E6C9F9; -webkit-clip-path: polygon(10% 0%, 10% 80%, 0% 80%, 0% 100%, 100% 100%, 100% 0%); clip-path: polygon(10% 0%, 10% 80%, 0% 80%, 0% 100%, 100% 100%, 100% 0%); } .card__title { font-weight: 800; font-size: 2em; margin-top: 20px; } .card__body { margin-top: 20px; max-width: 200px; } .card__input { background: transparent; border: 0; border-bottom: 2px solid black; font-size: 1em; outline: none !important; } .card__input:focus { border-width: 4px; } .card__radio { margin-right: 10px; vertical-align: baseline; } .card__check { margin-right: 10px; } .card__next { -webkit-tap-highlight-color: transparent; bottom: 20px; cursor: pointer; margin-top: 50px; position: absolute; right: 20px; user-select: none; } .card__shadow { overflow: hidden; pointer-events: none; position: absolute; top: 0; width: 10%; } .card__shadow-inner { box-shadow: inset 0 0 6px rgba(50,50,50,.12); height: calc(100% + 15px); left: -15px; position: relative; top: -15px; width: calc(100% + 15px); } .card:nth-child(1) .card__shadow { height: 0; } .card:nth-child(2) .card__shadow { height: 20%; } .card:nth-child(3) .card__shadow { height: 40%; } .card:nth-child(4) .card__shadow { height: 60%; } .card:nth-child(5) .card__shadow { height: 80%; } .card__index { align-items: center; cursor: pointer; display: flex; height: 20%; justify-content: center; position: absolute; text-align: center; width: 10%; z-index: 1; } .card:nth-child(1) .card__index { top: 0; } .card:nth-child(2) .card__index { top: 20%; } .card:nth-child(3) .card__index { top: 40%; } .card:nth-child(4) .card__index { top: 60%; } .card:nth-child(5) .card__index { top: 80%; }
The JavaScript to activate the card slider.
const cards = document.querySelectorAll('.card'), nexts = document.querySelectorAll('.card__next'), ixs = document.querySelectorAll('.card__index'); nexts.forEach((next, i) => { next.addEventListener('click', function() { cards[i + 1].style.transform = 'none'; }); }); ixs.forEach((index, i) => { index.addEventListener('click', () => { for (let j = ixs.length - 1; j > i; j--) { cards[j].style.transform = 'translateX(100%)'; } console.log(i); }) });