Responsive Carousel With Gradient Background

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