Как заставить мой overflow-x scroll работать только с двумя кнопками?

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

Это поможет вам.

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

Answer 2

Если вы используете загрузчик, вы можете использовать следующий код.

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