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 id="next" type="button" value="next">
<input 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

$('input').on('click', function(event) {
	 console.log(event.currentTarget.id)
   event.preventDefault();
   var direction = event.currentTarget.id === 'next' ? '+=' : '-='
   
   $('#outer').animate({
       scrollLeft: direction + 150
   }, 500);
	console.log($('#outer').offset().left)
});