jQuery addClass example

Change class name on click in jQuery

by e_kurbanov

HTML

<div id="outer">
  <div id="inner">
    <img src="http://via.placeholder.com/150x85">
    <img src="http://via.placeholder.com/150x85">
    <img src="http://via.placeholder.com/150x85">
    <img src="http://via.placeholder.com/150x85">
    <img src="http://via.placeholder.com/150x85">
    <img src="http://via.placeholder.com/150x85">
    <img src="http://via.placeholder.com/150x85">
  </div>
</div>
<input class="buttons" id="next" type="button" value="next">
<input class="buttons" id="prev" type="button" value="prev">

CSS

* {
  box-sizing: border-box;
}
div#outer{
  position: relative;
  width: 500px;
  height: 100px;
  overflow: scroll;
  bordeR: 1px solid red;
}
div#inner{
  position: absolute;
  left: 0;
  white-space: nowrap;
  border: 1px solid blue;
  transition: left 1s ease;
}
div#inner img{
  display: inline-block;
  border: 1px solid black;
}

JavaScript

var buttons = document.getElementsByClassName('buttons');
var outer = document.getElementById('outer');
var offset = 0;
var stop = 100;

function scroll(direction){

	for(var i = 0; i < buttons.length; i++){
   	buttons[i].addEventListener('click', function(event){
      if(event.target.id === 'next'){
      		stop = offset + 100;
      }else{
      		if(offset === 0){
             stop = offset;
          }else{
             stop = offset - 100;
          }
          
      }
      console.log(stop);
      console.log(offset);
   	  var i = setInterval(function(){
      		event.target.id === 'next'?offset++:offset--;
   	      outer.scrollTo(offset, 0)
   	      if(offset === stop){
   	          clearInterval(i);
   	      }
   	  }, 1);
   	});	
  }

}

scroll('next');