Wie kann ich die Folie nur beim ersten Klick nach links bewegen und verhindern, dass sie sich beim ersten Klick nach links bewegt?

Question

Mein Folienbereich scrollt nach rechts, wenn auf die linke Schaltfläche geklickt wird, aber dort ist nichts, und gibt es eine Möglichkeit, den ersten Klick zu sperren, so dass er nur nach links gescrollt werden kann, wenn er zuerst gescrollt wurde? Gibt es auch eine Möglichkeit, die Schriftrolle zu sperren, nachdem sie das letzte div erreicht hat?

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

Sie können versuchen, die Tastenfunktionen zu ändern, um nur die CSS zu ändern, wenn recent-container nicht am Ende ist. Zum Beispiel für die rechte Taste:

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"); 
    });