How can I animate this div to slide left when the 'right' button is clicked jquery?

Question

How can I get the recent container or the thmbnl-recent divs to slide left abit every time the right button is clicked without the scrollbar to create a sliding div effect like youtube has.

$('button').onclick(function(){
   $('#thmbnl-recent').animate({left: "-=500"}, 2000);
});

 /*----------Recent Projects----------*/
    
    
    #recent-container {
    	width: 950px;
    	height: 275px;
    	background-color: ;
    	border: solid;
    	border-width: 1px;
    	border-color: #d8d8d8;
    	margin-bottom: 25px;
    	position: absolute;
    	overflow-x: scroll;
    	overflow-y: hidden;
    	white-space: nowrap;
    
    }
    
    .thmbnl-recent {
    	padding: 20px 13px 0px 13px;
    	width: 190px;
    	display: inline-block;
    	border: solid;
    	border-width: 1px;
    	border-color: #d8d8d8;
    	background-color: white;
    	transition: background-color 0.3s ease;
    	cursor: pointer;
    
    }
    
    .thmbnl-recent h1 {
    	text-align: center;
    	font-family: "calibri light";
    	font-size: 24px;
    	margin: 0 auto;
    	padding: 10px 0px;
    	letter-spacing: 2px;
    }
    
    #recent-title {
    	font-family: "calibri light";
    	text-align: center;
    	width: 950px;
    	background-color: white;
    	margin: 0 auto;
    	padding: 10px 0px;
    	position: relative;
    	z-index: 2;
    	border-top: solid;
    	border-right: solid;
    	border-left: solid;
    	box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    	border-width: 1px;
    	border-color: #d8d8d8;
    }
    
    .thmbnl-recent:hover {
    	background-color: #e8e8e8;
    	transition: background-color 0.3s ease;
    }
    
    .thmbnl-recent:active {
    	background-color: #d1d1d1;
    }
    
    
    
    /*--------SLIDE IMAGE---------*/
    
    #gallery-container {
    	margin: 75px 0px 45px 0px;
    	text-align: center;
    	border: solid;
    	border-color: #d8d8d8;
    	border-width: 1.5px;
    }
    
    #slide-section {
    	text-align: center;
    	background-color: white;
    	padding: 20px 20px 0px 20px;
    
    }
    
    #gallery-container h1{
    	padding: 15px 0 15px 0;
    	margin: 0;
    	font-family: "calibri light";
    	font-size: 30px;
    	border-bottom: solid;
    	background-color: white;
    	border-color: #d8d8d8;
    	border-width: 1.5px;
    	box-shadow: 0 7px 15px -2px rgba(0, 0, 0, 0.3);
    	z-index: 3;
    	position: relative;
    }
    
    #imgrow {
    	margin-top: 20px;
    	padding-bottom: 20px;
    	display: flex;
    	justify-content: space-between;
    
    }
    
    button{
    	margin-top: 280px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 id="recent-title">Recent Projects</h2>

<div id="recent">
	<div id="recent-container">
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
	</div>

	<button>right</button>

</div>

Answer 1

Here's how I'd do it with jQuery and CSS3 animation :

var $slider = $("#recent-container")

$("button").click( function() {
	$slider.css("left","-=195px")
})

h1{
   font-size : 0.8rem
}

#recent {
  border: #f00 dashed 2px;
  overflow: hidden;
  position: relative;
  width: 600px;
  height: 230px;
}
#recent #recent-container {
  position: absolute;
  white-space: nowrap;
  left: 0;
  -webkit-transition: all 2s ease-in-out;
  transition: all 1s ease-in-out;
}
#recent #recent-container .thmbnl-recent {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 id="recent-title">Recent Projects</h2>

<div id="recent">
	<div id="recent-container">
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
		<div class="thmbnl-recent">
			<img src="http://placehold.it/190x190">
			<h1>Sample</h1>
		</div>
	</div>
</div>
<button>right</button>