change background colour of div on carousel

Question

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>

Answer 1

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.

Answer 2

There is a lot of solutions, but the simplest solution that I advice is to use odd and even numbers to style the divs in the carousel (meaning that eg. first is green second is orange third is green and so on...

.carousel__slider div:nth-child(2n) /*Selects even numbered elements*/
.carousel__slider div:nth-child(2n+1) /*Selects odd numbered elements*/

Check out the snippet

 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; }*/.carousel__slider div:nth-child(2n) { background-color:orange; }.carousel__slider div:nth-child(2n+1) { background-color:green; }

 <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" class="selected"></li> <li value="2" ></li> <li value="3" ></li> <li value="4" ></li> </ol> </div> </div> </section>