A Carrousel Developed Using JavaScript and Color Library

carrousel-js is a carrousel developed using the JavaScript library and Color-Thief. Beautiful and responsive carousel with a gradient background whose colors are selected from the image you are viewing.

linear gradient on carousel, responsive gradient background css, background image gradient overlay, bs carousel with text overlay, carousel background image

How to make use of it:

1. Add photos to the library.

<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. CSS styles needed for carousel rendering.

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 required color thief library to get 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))
        });
    }
}

Responsive Carousel With Gradient Background, carrousel-js Plugin/Github