change background colour of div on carousel

January 2, 2022

I’m trying to get to grips with javascript, and have followed a tutorial for a simple image slider. I’m trying to add to it and have the background fade to different colours as the slides move. I’ve managed to figure it out with the right and left arrows (not sure on best practise), but I can’t seem to get it right when selecting the indicators. Can anyone advise on a solution?

Thanks in advance.

const left = document.querySelector('.left');
const right = document.querySelector('.right');

const slider = document.querySelector('.carousel__slider');

const indicatorParent = document.querySelector('.carousel__controls ol'); 
const indicators = document.querySelectorAll('.carousel__controls li');

index = 0;

var background = 1;

function indicatorBg(val){
    var background = val;
    changeBg();
}

indicators.forEach((indicator, i) => {
  indicator.addEventListener('click', () => {
    document.querySelector('.carousel__controls .selected').classList.remove('selected');
    indicator.classList.add('selected');
    slider.style.transform = 'translateX(' + (i) * -25 + '%)';  
    index = i;
  });
});

left.addEventListener('click', function() {
  index = (index > 0) ? index -1 : 0;
  document.querySelector('.carousel__controls .selected').classList.remove('selected');
  indicatorParent.children[index].classList.add('selected');
  slider.style.transform = 'translateX(' + (index) * -25 + '%)';
    if (background <= 1) {
      return false;
    } else {
        background--;
    } 
    changeBg();
});

right.addEventListener('click', function() {
  index = (index < 4 - 1) ? index+1 : 3;
  document.querySelector('.carousel__controls .selected').classList.remove('selected');
  indicatorParent.children[index].classList.add('selected');
  slider.style.transform = 'translateX(' + (index) * -25 + '%)';
    if (background >= 4) {
      return false;
    } else {
        background++;
    } 
    changeBg();
});

function changeBg (){
    if (background == 1) {
        document.getElementById("carousel__track").className = 'slide-1'; 
    } else if (background == 2) {
        document.getElementById("carousel__track").className = 'slide-2';
    } else if (background == 3) {
        document.getElementById("carousel__track").className = 'slide-3';
    } else if (background == 4) {
        document.getElementById("carousel__track").className = 'slide-4';
    }
}

window.onload = changeBg;

.carousel {
    height: 80vh;
    width: 100%;
    margin: 0 auto;
}
#carousel__track {
    height: 100%;
    position: relative;
    overflow: hidden;
}
.background {
    background: red;
}
.carousel__slider {
    height: 100%;
    display: flex;
    width: 400%;
    transition: all 0.3s;
}
.carousel__slider div {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.carousel__controls .carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 8888
}
.carousel__controls .carousel__arrow i {
    font-size: 2.6rem;
}
.carousel__arrow.left {
    left: 1em;
}
.carousel__arrow.right {
    right: 1em;
}
.carousel__controls ol {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
.carousel__controls ol li {
    width: 14px;
    height: 14px;
    border-radius: 50px;
    margin: .5em;
    padding: 0;
    background: white;
    transform: scale(.6);
    cursor: pointer;
}
.carousel__controls ol li.selected {
    background: black;
    transform: scale(1);
    transition: all .2s;
    transition-delay: .3s;
}
.slide-1 {
    background: pink;
    transition: all 0.4s;
}
.slide-2 {
    background: coral;
    transition: all 0.4s;
}
.slide-3 {
    background: green;
    transition: all 0.4s;
}
.slide-4 {
    background: orange;
    transition: all 0.4s;
}

<section class="carousel">
      <div id="carousel__track">
            <div class="carousel__slider">
                <div>Slide 1</div>
                <div>Slide 2</div>
                <div>Slide 3</div>
                <div>Slide 4</div>
            </div>
            <div id="left" class="carousel__controls"><span class="carousel__arrow left"><</span> <span id="right" class="carousel__arrow right">></span>
              <ol>
                <li value="1" onclick="indicatorBg(this.value)" class="selected"></li>
                    <li value="2" onclick="indicatorBg(this.value)"></li>
                    <li value="3" onclick="indicatorBg(this.value)"></li>
                    <li value="4" onclick="indicatorBg(this.value)"></li>
                </ol>
            </div>
        </div>
    </section>

>Solution :

You forgot to change the background inside the click event handler of the indicators.

indicators.forEach((indicator, i) => {
  indicator.addEventListener('click', () => {
    document.querySelector('.carousel__controls .selected').classList.remove('selected');
    indicator.classList.add('selected');
    slider.style.transform = 'translateX(' + (i) * -25 + '%)';  
    index = i;

    background = index + 1;
    changeBg();
  });
});

As far as best practice goes, I typically use class names for CSS and IDs for JavaScript. Personally, I wouldn’t recommend you worry about best practices at this stage, but instead, focus on getting the code working and understanding what’s going on line-by-line.