I make a carousel that moves the sliders using the arrows and buttons on the keyboard, it remains to do so that when you click left or right on the keyboard, the corresponding slider is selected and highlighted in green, how can this be done? All Code:

var lis = document.querySelectorAll('.images li'); var focused = document.querySelectorAll('.focused'); var width = 124; var count = 1; var left = 0; var carousel = document.getElementById('carousel'); var list = carousel.querySelector('ul'); var listElems = carousel.querySelectorAll('.images li'); var position = 0; function prev() { left = left + width; if (left > 0) { left = -868; } list.style.marginLeft = left + 'px'; }; function next() { left = left - width; if (left < -868) { left = 0; } list.style.marginLeft = left + 'px'; }; function eventKey(e) { switch (e.keyCode) { case 37: prev() break; case 39: next() break; } } addEventListener("keydown", eventKey); 
 ul { width: 9999px; transition: .3s ease; padding: 0; } li { display: inline-block; width: 90px; height: 200px; border: 2px solid #000; margin: 0 20px; } .arrow { width: 50px; height: 50px; margin: 70px 0 0 0; background: grey; border-radius: 50%; text-align: center; line-height: 50px; z-index: 999; display: block; float: left; } .focused { background-color: green; } img { display: block; } .wrap_ul { overflow: hidden; } #carousel { max-width: 600px; height: 200px; margin: 0 auto; float: left; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button class="arrow prev" onclick="prev()">⇦</button> <div id="carousel" class="carousel"> <div class="wrap_ul"> <ul class="images"> <li class="focused">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> </div> <button class="arrow next" onclick="next()">⇨</button> </body> </html>

    1 answer 1

     var lis = document.querySelectorAll('.images li'); var focused = document.querySelectorAll('.focused'); var width = 124; var count = 1; var left = 0; var carousel = document.getElementById('carousel'); var list = carousel.querySelector('ul'); var listElems = carousel.querySelectorAll('.images li'); let current = 0; var position = 0; function prev() { left = left + width; listElems[current].style.background = "white"; current--; if (current < 0) { left = -868; listElems[0].style.background = "white"; current = listElems.length - 1; listElems[current].style.background = "green"; } listElems[current].style.background = "green"; list.style.marginLeft = left + 'px'; }; function next() { left = left - width; listElems[current].style.background = "white"; current++; if (current > listElems.length - 1) { left = 0; listElems[current - 1].style.background = "white"; current = 0; listElems[current].style.background = "green"; } listElems[current].style.background = "green"; list.style.marginLeft = left + 'px'; }; function eventKey(e) { switch (e.keyCode) { case 37: prev() break; case 39: next() break; } } addEventListener("keydown", eventKey); 
     ul { width: 9999px; transition: .3s ease; padding: 0; } li { display: inline-block; width: 90px; height: 200px; border: 2px solid #000; margin: 0 20px; } .arrow { width: 50px; height: 50px; margin: 70px 0 0 0; background: grey; border-radius: 50%; text-align: center; line-height: 50px; z-index: 999; display: block; float: left; } .focused { background-color: green; } img { display: block; } .wrap_ul { overflow: hidden; } #carousel { max-width: 600px; height: 200px; margin: 0 auto; float: left; } 
     <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button class="arrow prev" onclick="prev()">⇦</button> <div id="carousel" class="carousel"> <div class="wrap_ul"> <ul class="images"> <li class="focused">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> </div> <button class="arrow next" onclick="next()">⇨</button> </body> </html>