Author: | minhanPark |
---|---|
Views Total: | 5,081 views |
Official Page: | Go to website |
Last Update: | December 6, 2018 |
License: | MIT |
Preview:

Description:
An automatic slideshow/carousel that automatically transitions between slides with CSS3 powered scale and fade animations.
How to use it:
Create slides for the slideshow/carousel.
<div> <div class="slide"> <h1>Vanilla</h1> </div> <div class="slide"> <h1>Carousel</h1> </div> <div class="slide"> <h1>Slider</h1> </div> </div>
The necessary CSS for the slides.
.slide { width: 100%; height: 400px; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; transform: scale(0.9); opacity: 0.8; transition: all 0.5s ease-in-out; } .showing { z-index: 1; transform: none; opacity: 1; }
The core functions for the slideshow/carousel.
const first = document.querySelector('.slide'); const slide = () => { const before = document.querySelector('.showing'); if (before) { before .classList .remove('showing'); const next = before.nextElementSibling; if (next) { next .classList .add('showing') } else { first .classList .add('showing'); } } else { first .classList .add('showing'); } } slide();
Set the interval between slides.
setInterval(slide, 1500);