Author: | MatthewBaa |
---|---|
Views Total: | 3,984 views |
Official Page: | Go to website |
Last Update: | February 6, 2018 |
License: | MIT |
Preview:

Description:
A responsive, fullscreen carousel built using vanilla JavaScript and CSS3 that makes it possible to transition between any block elements with a CSS3 powered swipe transition effect.
How to use it:
Add as many slides to the carousel.
<div class="carousel"> <div class="viewport"> <div class="slide-container"> <div class="slide-3"> </div> </div> <div class="slide-container"> <div class="slide-2"> </div> </div> <div class="slide-container"> <div class="slide-1"> </div> </div> </div> </div>
The basic CSS for the carousel.
.carousel { width: 100%; height: 100vh; box-sizing: border-box; } .viewport { width: 100%; height: 100%; position: relative; background-color: black; } .slide-container { width: 100%; height: 100%; position: absolute; } .slide-container > div { width: 100%; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; animation-name: swipe; animation-duration: 15s; /* 5 * number of slides. */ animation-iteration-count: infinite; animation-timing-function: cubic-bezier(1, 0, 0, 1); z-index: 1; position: absolute; background-color: white; }
The CSS3 for the swipe transition effect.
@keyframes swipe { 0% { z-index: 1; will-change: width; } 15% { width: 0; visibility: hidden; } 30% { z-index: 0; width: 100%; } 65.9% { /* (Numer of slides * 10) + 36 - 0.1. */ z-index: 0; visibility: hidden; } 66% { /* (Numer of slides * 10) + 36. */ visibility: visible; } }
Add background images to the slides.
.slide-1 { background: url(images/1.jpeg) no-repeat center center fixed; animation-delay: 5s; } .slide-2 { background: url(images/2.jpg) no-repeat center center fixed; animation-delay: 10s; } .slide-3 { background: url(images/3.jpeg) no-repeat center center fixed; animation-delay: 15s; }
The main JavaScript to activate the carousel on page load.
const slidesContainers = document.querySelectorAll('.slide-container'); const wrapper = document.querySelector('.wrapper'); let panAmount = 5; function init() { slidesContainers.style.width = (100 + slidesContainers.length * panAmount) + "%"; // Set wrapper width based on number of slides + panAmount. for (var i = 0; i < slidesContainers.length; i++) { slidesContainers.style.width = 100 / slidesContainers.length + "%"; // Fit slides into the wrapper. } } init();