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 class="carrousel-item">
    <img class="carrousel-item-img" src="img/2.jpg" alt="Baby Driver movie poster">
  <div class="carrousel-item">
    <img class="carrousel-item-img" src="img/3.jpg" alt="ParĂ¡sitos movie poster">
  <div class="carrousel-actions">
    <button class="btn btn-carrousel" id="carrousel-btn-prev" aria-label="Previous slide">
      Prev Image
    <button class="btn btn-carrousel" id="carrousel-btn-next" aria-label="Next slide">
      Next Image

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%);


@keyframes fadeVisibility {
  0% {
      opacity: 0;

  100% {
      opacity: 1;


@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.

const slides = document.getElementsByClassName("carrousel-item")
let slidePosition = 0
const totalSlides = slides.length
const colorThief = new ColorThief()

document.getElementById("carrousel-btn-prev").addEventListener("click", function() {
document.getElementById("carrousel-btn-next").addEventListener("click", function() {

function hideAllSlides() {
    for(const slide of slides) {

function showCurrentSlide() {

function moveToPreviousPosition() {
    if(slidePosition > 0) {
    } else {
        slidePosition = totalSlides - 1

function moveToNextPosition() {
    if(slidePosition < totalSlides - 1) {
    } else {
        slidePosition = 0

function moveSlide(direction) {

    if(direction === "previous") {
    } else if(direction === "next") {


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) {
    } else {
        img.addEventListener('load', function() {

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.

Related Posts


Responsive Multiple Selection Combo Box using Bootstrap 3 | MagicSuggest

MagicSuggest is an easy-to-use jQuery plugin for creating a combo menu that allows you to select multiple items from a dropdown list with typing and auto-complete support….


Material Design Inspired Tab UI In Vanilla JavaScript

Material Design tab vanilla JS implements a material design-inspired tab component with a click ripple effect and an active sliding menu cursor. Must Read: Responsive Accessible Tabs…


Simple Countdown Timer App In jQuery

The countdown is a front-end application that allows starting the countdown with two options: set a target date or write the number of countdown days. A countdown…


Add Animation to Your HTML5 Pages | animate.js

animate.js is a small JavaScript library that provides a convenient way to apply CSS animations powered by Animate.css to DOM elements without writing any CSS. Easily apply…


Responsive Hover Parallax Cards With Vuejs

Vue Responsive Parallax Cards Hover Create response cards with a scroll-triggered parallax effect in your Vue.js application. Must Read: jQuery Sliding Display Your Content Like a Deck…


Responsive Pure CSS Only Accordion & Tabs Component

Responsive pure CSS accordion tabs and tabs will automatically convert to a vertical accordion interface on mobile devices. Must Read: Create Dynamic Accordion Giving JSON Data Using…