Is there a way to prevent the slide area from scrolling left when the left button is clicked before it has been scrolled right first? Additionally, how can we lock the scroll after it reaches the last div?
var $slider = $("#recent-container")
$("#right-button").click(function() {
$slider.css("left", "-=932px")
});
$("#left-button").click(function() {
$slider.css("left", "+=932px")
});/*----------Recent Projects----------*/
#recent-title {
font-size: 30px;
font-family: 'calibri light';
border-bottom: #d8d8d8 solid 1px;
margin: 0px;
padding: 10px;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}
.thmbnl-name {
font-size: 20px;
font-family: 'calibri light';
text-align: center;
}
#recent {
text-align: center;
border: #d8d8d8 solid 1px;
overflow: hidden;
position: relative;
width: 950px;
height: 330px;
background-color: white;
z-index: 1;
margin-bottom: 25px;
}
#recent #recent-container {
position: absolute;
white-space: nowrap;
left: 0;
-webkit-transition: all 2s ease-in-out;
transition: all 1s ease-in-out;
z-index: -1;
padding: 10px;
}
#recent #recent-container .thmbnl-recent {
display: inline-block;
}
.thmbnl-recent {
padding: 19.5px;
}
.thmbnl-recent:hover {
background-color: #eaeaea;
transition: background-color ease 1s;
}
#right-button {
font-family: 'calibri';
font-weight: bold;
border-style: none;
width: 60px;
height: 60px;
font-size: 35px;
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
right: 0px;
top: 37.5%;
cursor: pointer;
color: #e5e5e5;
border-radius: 100%;
text-align: center;
line-height: 55px;
}
#left-button {
font-family: 'calibri';
font-weight: bold;
border-style: none;
width: 60px;
height: 60px;
font-size: 35px;
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
left: 0px;
top: 37.5%;
cursor: pointer;
color: #e5e5e5;
border-radius: 100%;
text-align: center;
line-height: 55px;
}<div id="recent">
<h2 id="recent-title">Recent Projects</h2>
<div id="recent-container">
<div class="thmbnl-recent">
<img src="http://placehold.it/190x190">
<h1 class="thmbnl-name">Sample</h1>
</div>
<div class="thmbnl-recent">
<img src="http://placehold.it/190x190">
<h1 class="thmbnl-name">Sample</h1>
</div>
<div class="thmbnl-recent">
<img src="http://placehold.it/190x190">
<h1 class="thmbnl-name">Sample</h1>
</div>
<div class="thmbnl-recent">
<img src="http://placehold.it/190x190">
<h1 class="thmbnl-name">Sample</h1>
</div>
<div class="thmbnl-recent">
<img src="http://placehold.it/190x190">
<h1 class="thmbnl-name">Sample</h1>
</div>
<div class="thmbnl-recent">
<img src="http://placehold.it/190x190">
<h1 class="thmbnl-name">Sample</h1>
</div>
<div class="thmbnl-recent">
<img src="http://placehold.it/190x190">
<h1 class="thmbnl-name">Sample</h1>
</div>
<div class="thmbnl-recent">
<img src="http://placehold.it/190x190">
<h1 class="thmbnl-name">Sample</h1>
</div>
</div>
<p id="right-button">></p>
<p id="left-button">
<</p>
</div>