Author: | aidacapom |
---|---|
Views Total: | 162 views |
Official Page: | Go to website |
Last Update: | October 9, 2024 |
License: | MIT |
Preview:

Description:
A beautiful responsive carousel with a gradient background whose colors are exacted from the image you’re viewing on.
How to use it:
1. Add images to the carousel.
<div class="carrousel"> <div class="carrousel-item carrousel-item-visible"> <img class="carrousel-item-img" src="img/1.jpg" alt="Joker movie poster"> </div> <div class="carrousel-item"> <img class="carrousel-item-img" src="img/2.jpg" alt="Baby Driver movie poster"> </div> <div class="carrousel-item"> <img class="carrousel-item-img" src="img/3.jpg" alt="Parásitos movie poster"> </div> <div class="carrousel-actions"> <button class="btn btn-carrousel" id="carrousel-btn-prev" aria-label="Previous slide"> Prev Image </button> <button class="btn btn-carrousel" id="carrousel-btn-next" aria-label="Next slide"> Next Image </button> </div> </div>
2. The necessary CSS styles for the carousel.
img { width: 100%; height: auto; } .btn { font-weight: bold; border: 0; cursor: pointer; } .btn i { font-size: 2rem; } .btn-carrousel { background-color: #fff; border-radius: 50%; width: 2.5rem; height: 2.5rem; } .btn-carrousel:hover { background-color: rgba(255, 255, 255, .75); } .fa-angle-left { padding-right: .15rem; } .fa-angle-right { padding-left: .15rem; } .carrousel { margin: 0 auto; max-width: 700px; height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; } .carrousel-item { width: 100%; display: none; } .carrousel-item-img { border-radius: 1.5em; } .carrousel-item-visible { display: block; animation: fadeVisibility 0.5s; } .carrousel-actions { display: flex; justify-content: space-between; position: absolute; top: 50%; left: 3%; right: 3%; transform: translateY(-50%); } /* ANIMATIONS */ @keyframes fadeVisibility { 0% { opacity: 0; } 100% { opacity: 1; } } /* MEDIA QUERIES */ @media (max-width: 768px) { .carrousel { width: 100%; max-width: 100%; } .carrousel-item-img { border-radius: 0; } }
3. Load the needed color-thief library to grab the dominant color from your image.
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
4. The main JavaScript to enable the carousel.
/* SELECTORS */ const slides = document.getElementsByClassName("carrousel-item") let slidePosition = 0 const totalSlides = slides.length const colorThief = new ColorThief() /* EVENT LISTENERS */ document.getElementById("carrousel-btn-prev").addEventListener("click", function() { moveSlide("previous") }) document.getElementById("carrousel-btn-next").addEventListener("click", function() { moveSlide("next") }) /* FUNCTIONS */ function hideAllSlides() { for(const slide of slides) { slide.classList.remove("carrousel-item-visible") } } function showCurrentSlide() { slides[slidePosition].classList.add("carrousel-item-visible") } function moveToPreviousPosition() { if(slidePosition > 0) { slidePosition-- } else { slidePosition = totalSlides - 1 } } function moveToNextPosition() { if(slidePosition < totalSlides - 1) { slidePosition++ } else { slidePosition = 0 } } function moveSlide(direction) { hideAllSlides() if(direction === "previous") { moveToPreviousPosition() } else if(direction === "next") { moveToNextPosition() } showCurrentSlide() getDominantColor() } function changeBGColor(color) { document.body.style.background = `linear-gradient(to bottom right, rgb(15, 15, 15) 50%, rgb(${color[0]}, ${color[1]}, ${color[2]}))` } function getDominantColor() { const img = document.querySelector('.carrousel-item-visible .carrousel-item-img') // Make sure image is finished loading if (img.complete) { changeBGColor(colorThief.getColor(img)) } else { img.addEventListener('load', function() { changeBGColor(colorThief.getColor(img)) }); } }
Changelog:
v2.6.0 (10/09/2024)
- Update dependency
- feat: Pass mimetype when input is Buffer