jQuery addClass example

Change class name on click in jQuery

HTML

<div class="wrapper">
  <img src="https://picsum.photos/200/200/?random" alt="">
  <img src="https://picsum.photos/200/199/?random" alt="">
  <img src="https://picsum.photos/200/188/?random" alt="">
  <img src="https://picsum.photos/200/177/?random" alt="">
  <img src="https://picsum.photos/200/166/?random" alt="">
  <img src="https://picsum.photos/200/155/?random" alt="">
  <img src="https://picsum.photos/200/144/?random" alt="">
  <img src="https://picsum.photos/200/133/?random" alt="">
  <img src="https://picsum.photos/200/122/?random" alt="">
  <img src="https://picsum.photos/200/111/?random" alt="">
  <img src="https://picsum.photos/200/121/?random" alt="">
  <img src="https://picsum.photos/200/132/?random" alt="">
  <img src="https://picsum.photos/200/143/?random" alt="">
  <img src="https://picsum.photos/200/154/?random" alt="">
  <img src="https://picsum.photos/200/165/?random" alt="">
  <img src="https://picsum.photos/200/176/?random" alt="">
  <img src="https://picsum.photos/200/187/?random" alt="">
  <img src="https://picsum.photos/200/198/?random" alt="">
  <img src="https://picsum.photos/299/200/?random" alt="">
  <img src="https://picsum.photos/299/199/?random" alt="">
  <img src="https://picsum.photos/299/188/?random" alt="">
  <img src="https://picsum.photos/299/177/?random" alt="">
  <img src="https://picsum.photos/299/166/?random" alt="">
  <img src="https://picsum.photos/299/155/?random" alt="">
  <img src="https://picsum.photos/299/144/?random" alt="">
  <img src="https://picsum.photos/299/133/?random" alt="">
  <img src="https://picsum.photos/299/122/?random" alt="">
  <img src="https://picsum.photos/299/111/?random" alt="">
  <img src="https://picsum.photos/299/121/?random" alt="">
  <img src="https://picsum.photos/299/132/?random" alt="">
  <img src="https://picsum.photos/299/143/?random" alt="">
  <img src="https://picsum.photos/299/154/?random" alt="">
  <img src="https://picsum.photos/299/165/?random" alt="">
  <img...

CSS

html, body {
  margin:0;
  padding:0;
  height:100%;
}

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

.wrapper img {
  flex: 0 0 auto;
  height:100%;
  width:auto;
  max-width:none;
}

JavaScript

let $document = jQuery(document);
let $wrapper = jQuery('.wrapper').first();
let scrollDistance = jQuery(window).width() / 2;
let deltaTime = 0;

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

	let delta = 0;
  
	if(event.keyCode == 37) {
  	delta -= scrollDistance;
  }
  
	if(event.keyCode == 39) {
  	delta += scrollDistance;
  }
  
  if(!delta || jQuery(event.target).is('input, textarea, select')) {
    return;
  }
  
  event.preventDefault();
  
  if(deltaTime + 400 > (new Date().getTime())) {
    delta = delta * 2
  }
  
  if(deltaTime + 150 > (new Date().getTime())) {
    delta = delta * 4
  }
  
  deltaTime = (new Date().getTime());
  
  $wrapper.stop(true, true);
  
  let targetX = Math.min(
  	Math.max($wrapper.scrollLeft() + delta, 0), 
    $wrapper[0].scrollWidth - $wrapper.width());
    
  $wrapper.animate({scrollLeft: targetX}, 750);
  
});