Author: | ommiles |
---|---|
Views Total: | 587 views |
Official Page: | Go to website |
Last Update: | March 26, 2021 |
License: | MIT |
Preview:

Description:
This is a responsive, lightweight image slider inspired by Bootstrap’s Carousel component. Created using pure (Vanilla JS) and without 3rd dependencies.
How to use it:
1. Add images, descriptions, and controls to the carousel.
<div class="carousel"> <!-- Image Here --> <div class="carousel-inner"> <div class="item active"> <div class="container"> <img src="1.jpg" alt="Image Alt 1"> <blockquote>Description 1</blockquote> <p class="author">Author 1</p> </div> </div> <div class="item"> <div class="container"> <img src="2.jpg" alt="Image Alt 2"> <blockquote>Description 2</blockquote> <p class="author">Author 2</p> </div> </div> <div class="item"> <div class="container"> <img src="3.jpg" alt="Image Alt 3"> <blockquote>Description 3</blockquote> <p class="author">Author 3</p> </div> </div> </div> <!-- Carousel Controls --> <div class="carousel-control left"> <div class="arrow left"></div> </div> <div class="carousel-control right"> <div class="arrow right"></div> </div> <ol class="carousel-indicators"> <li class="active"></li> <li></li> <li></li> </ol> </div>
2. The necessary CSS styles for the carousel.
.carousel { position: absolute; top: 50%; left: 50%; width: 100%; padding: 90px 0; text-align: center; background-color: #000; transform: translate(-50%, -50%); } .carousel-inner { position: relative; width: 100%; overflow: hidden; } .carousel-inner>.item { position: relative; display: none; animation: 0.5s ease-in-out; } .carousel-inner>.active, .carousel-inner>.next { display: block; } .carousel-inner>.next { position: absolute; top: 0; width: 100%; } .carousel-inner>.to-left { animation-name: left; } .carousel-inner>.from-right { animation-name: right; } .carousel-inner>.to-right { animation-name: right; animation-direction: reverse; } .carousel-inner>.from-left { animation-name: left; animation-direction: reverse; } .container { margin: 0 auto; } img { padding: 10px 20px; margin: 30px 90px; max-height: 60%; max-width: 60%; } .author { margin: 0; opacity: 0.5; } .carousel-control { position: absolute; top: 0; bottom: 0; left: 0; width: 15%; cursor: pointer; } .carousel-control.right { right: 0; left: auto; } .carousel-control>.arrow { position: absolute; top: 50%; display: inline-block; width: 30px; height: 30px; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNiAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+QXJyb3c8L3RpdGxlPjxwYXRoIGQ9Ik0yNS42IDEwLjk3NGwtOC41MyA4LjYyYTEuMzYgMS4zNiAwIDAgMS0xLjkzNS4wMDMgMS4zODcgMS4zODcgMCAwIDEtLjAwMi0xLjk1bDYuMjAxLTYuMjY4SDEuMzY4QTEuMzc0IDEuMzc0IDAgMCAxIDAgMTBjMC0uNzYyLjYxMy0xLjM4IDEuMzY4LTEuMzhoMTkuOTY2bC02LjItNi4yNjdhMS4zODcgMS4zODcgMCAwIDEgLjAwMS0xLjk1IDEuMzYgMS4zNiAwIDAgMSAxLjkzNi4wMDJsOC41MyA4LjYyMWMuNTMyLjUzOC41MzIgMS40MSAwIDEuOTQ4IiBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=") center center no-repeat; background-size: 26px 20px; opacity: 0.6; transform: translateY(-50%); } .carousel-control>.arrow:hover { opacity: 0.8; } .carousel-control>.arrow.left { transform: translateY(-50%) rotate(180deg); } .carousel-control>.arrow.right { right: 50%; } .carousel-indicators { position: absolute; bottom: 20px; left: 50%; padding-left: 0; margin: 0; list-style: none; transform: translateX(-50%); } .carousel-indicators li { display: inline-block; width: 10px; height: 10px; cursor: pointer; border: 1px solid #FFFFFF; border-radius: 10px; } .carousel-indicators li.active { background-color: #FFFFFF; } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } @keyframes left { from { left: 0; } to { left: -100%; } } @keyframes right { from { left: 100%; } to { left: 0; } }
3. The core JavaScript to activate the carousel.
var items = document.querySelectorAll('.carousel .item'); var dots = document.querySelectorAll('.carousel-indicators li'); var currentItem = 0; var isEnabled = true; function changeCurrentItem(n) { currentItem = (n + items.length) % items.length; } function nextItem(n) { hideItem('to-left'); changeCurrentItem(n + 1); showItem('from-right'); } function previousItem(n) { hideItem('to-right'); changeCurrentItem(n - 1); showItem('from-left'); } function goToItem(n) { if (n < currentItem) { hideItem('to-right'); currentItem = n; showItem('from-left'); } else { hideItem('to-left'); currentItem = n; showItem('from-right'); } } function hideItem(direction) { isEnabled = false; items[currentItem].classList.add(direction); dots[currentItem].classList.remove('active'); items[currentItem].addEventListener('animationend', function() { this.classList.remove('active', direction); }); } function showItem(direction) { items[currentItem].classList.add('next', direction); dots[currentItem].classList.add('active'); items[currentItem].addEventListener('animationend', function() { this.classList.remove('next', direction); this.classList.add('active'); isEnabled = true; }); } document.querySelector('.carousel-control.left').addEventListener('click', function() { if (isEnabled) { previousItem(currentItem); } }); document.querySelector('.carousel-control.right').addEventListener('click', function() { if (isEnabled) { nextItem(currentItem); } }); document.querySelector('.carousel-indicators').addEventListener('click', function(e) { var target = [].slice.call(e.target.parentNode.children).indexOf(e.target); if (target !== currentItem && target < dots.length) { goToItem(target); } });