javascript - 如何让我的 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

如果您使用的是 Bootstrap ，则可以使用以下代码。

<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()