如何使我的overflow-x滾動僅使用兩個按鈕？

Question

我希望能夠使用兩個按鈕在圖像中滾動：一個在左邊，另一個在右邊。
因此，當用戶單擊div流程將開始移動。 如果他們單擊右按鈕，則向右走；如果他單擊左按鈕，則向左走。

 .nf { margin-left: -13px; width: 97.9%; display: flex; overflow-x: auto; } .nf>a>img { border-radius: 18px; width: 350px; height: 242px; margin: 5px; border: 5px solid white; } .nf>a>p { text-align: center; color: white; margin-left: 10px; width: 30.5%; background-color: #ffffffb0; margin-top: -50px; position: absolute; height: 40px; padding-top: 8px; font-size: 17px; ; } 

 <div class="nivelifillestar"> <h1>Niveli Fillestar</h1> <div class="col-lg-12 col-md-12 col-xs-12 nf"> <a href=""><img src="eni1.jpeg"> <p>30 DITE PER KRAHE GJIGANDE</p> </a> <a href=""><img src="77.jpg"> <p>30 DITE PER KRAHE GJIGANDE</p> </a> <a href=""><img src="77.jpg"> <p>30 DITE PER KRAHE GJIGANDE</p> </a> <a href=""><img src="77.jpg"> <p>30 DITE PER KRAHE GJIGANDE</p> </a> <a href=""><img src="77.jpg"> <p>30 DITE PER KRAHE GJIGANDE</p> </a> <a href=""><img src="77.jpg"> <p>30 DITE PER KRAHE GJIGANDE</p> </a> <a href=""><img src="77.jpg"> <p>30 DITE PER KRAHE GJIGANDE</p> </a> <a href=""><img src="77.jpg"> <p>30 DITE PER KRAHE GJIGANDE</p> </a> <a href=""><img src="77.jpg"> <p>30 DITE PER KRAHE GJIGANDE</p> </a> <a href=""><img src="77.jpg"> <p>30 DITE PER KRAHE GJIGANDE</p> </a> </div> </div> 

Answer 1

如果使用引導程序，則可以使用以下代碼。

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="eni1.jpeg" alt="First slide">
        <div class="carousel-caption d-none d-md-block">
         <p>30 DITE PER KRAHE GJIGANDE</p>
       </div>
    </div>
    <div class="carousel-item active">
      <img class="d-block w-100" src="eni1.jpeg" alt="First slide">
        <div class="carousel-caption d-none d-md-block">
         <p>30 DITE PER KRAHE GJIGANDE</p>
       </div>
    </div>
    <div class="carousel-item active">
      <img class="d-block w-100" src="eni1.jpeg" alt="First slide">
        <div class="carousel-caption d-none d-md-block">
         <p>30 DITE PER KRAHE GJIGANDE</p>
       </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

添加此javascript：-

$('.carousel').carousel()

Answer 2

這將幫助您。

 $(document).ready(function(){ $("#left").click(function(){ var leftPos = $('.nf').scrollLeft(); $(".nf").animate({scrollLeft: leftPos - 200}, 800); }) $("#right").click(function(){ var leftPos = $('.nf').scrollLeft(); $(".nf").animate({scrollLeft: leftPos + 200}, 800); }) }); 

 .nf { margin-left: -13px; width: 97.9%; display: flex; overflow-x: auto; } .nf>a>img { border-radius: 18px; width: 350px; height: 242px; margin: 5px; border: 5px solid white; } .nf>a>p { text-align: center; color: white; margin-left: 10px; width: 30.5%; background-color: #ffffffb0; margin-top: -50px; position: absolute; height: 40px; padding-top: 8px; font-size: 17px; ; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="nivelifillestar"> <h1>Niveli Fillestar</h1> <button id="left">Left</button> <button id="right">Right</button> <div class="col-lg-12 col-md-12 col-xs-12 nf"> <a href=""><img src="eni1.jpeg"> <p>30 DITE PER KRAHE GJIGANDE</p> </a> <a href=""><img src="77.jpg"> <p>30 DITE PER KRAHE GJIGANDE</p> </a> <a href=""><img src="77.jpg"> <p>30 DITE PER KRAHE GJIGANDE</p> </a> <a href=""><img src="77.jpg"> <p>30 DITE PER KRAHE GJIGANDE</p> </a> <a href=""><img src="77.jpg"> <p>30 DITE PER KRAHE GJIGANDE</p> </a> <a href=""><img src="77.jpg"> <p>30 DITE PER KRAHE GJIGANDE</p> </a> <a href=""><img src="77.jpg"> <p>30 DITE PER KRAHE GJIGANDE</p> </a> <a href=""><img src="77.jpg"> <p>30 DITE PER KRAHE GJIGANDE</p> </a> <a href=""><img src="77.jpg"> <p>30 DITE PER KRAHE GJIGANDE</p> </a> <a href=""><img src="77.jpg"> <p>30 DITE PER KRAHE GJIGANDE</p> </a> </div> </div>