jQuery addClass example

Change class name on click in jQuery

HTML

<div class="wrapper">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
  <img src="https://placehold.it/400x200" alt="">
</div>

CSS

.wrapper {
  display:flex;
  flex-direction:row;
  overflow:auto;
}

.wrapper img {
  flex: 0 0 auto;
  height:200px;
  width:auto;
  max-width:none;
}

JavaScript

let $document = jQuery(document);
let $wrapper = jQuery('.wrapper').first();
let scrollDistance = 500;

jQuery(document).bind('keydown', (event) => {

	let delta = 0;
  
	if(event.keyCode == 37) {
  	delta -= scrollDistance;
  }
  
	if(event.keyCode == 39) {
  	delta += scrollDistance;
  }
  
  if(!delta) {
    return;
  }
  
  event.preventDefault();
  
  let targetX = Math.min(
  	Math.max($wrapper.scrollLeft() + delta, 0), 
    $wrapper[0].scrollWidth - $wrapper.width());
  
  $wrapper.stop(true, true);
  $wrapper.animate({scrollLeft: targetX}, 500);
  
});