Press "Enter" to skip to content

A Carrousel Developed Using JavaScript and Color

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


See Demo And Download

Official Website(aidacapom): Click Here

This superior jQuery/javascript plugin is developed by aidacapom. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *