最初のクリックでスライドを移動させ、最初のクリックで左に動かないようにするにはどうすればよいですか？

Question

左のボタンをクリックしたときにスライド領域が右にスクロールされますが、何も表示されないため、最初のクリックをロックして右にスクロールしたときにのみ左にスクロールできるようになります。最後の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>

Answer 1

あなたはrecent-containerが最後ではない場合にのみCSSを変更するには、ボタンの機能を変更しようとすることができます。例えば、右ボタン用：

var $slider = $("#recent-container"); 
    $("#right-button").click(function() { 
    if ($slider.position().left + $slider.width() > 0) $slider.css("left", "-=932px"); 
    }); 

    $("#left-button").click(function() { 
    if ($slider.position().left < 0) $slider.css("left", "+=932px"); 
    });