Bootstrap Карусель последний элемент будет скрывать правый контроль

Question

Я использую версию начальной загрузки 4.0.Я хочу скрыть левый элемент управления на первом элементе и скрыть правый элемент управления на последнем элементе.Я думаю, что с помощью jQuery это можно решить.

Левый элемент управления будет скрывать все время, пока он отображается только на последнем элементе.Правый элемент управления будет показывать все время, но будет скрываться в последнем элементе.

HTML:

<div id="carousel-1" class="carousel slide" data-ride="carousel">

      <div class="carousel-inner">
        <div class="carousel-item active">
          Slide 1
        </div>
        <div class="carousel-item">
          Slide 2
        </div>
        <div class="carousel-item">
          Slide 3
        </div>
      </div>
      <a class="carousel-control-prev" href="#carousel-1" 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="#carousel-1" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

JQuery:

$('.carousel').carousel({
    interval: false,
})

function checkitem()
{
    var $this = $('#carousel-1');
    if ($('.carousel-inner .carousel-item:first').hasClass('active')) {
        $this.children('.carousel-control-prev').hide();
    } else if ($('.carousel-inner .carousel-item:last').hasClass('active')) {
        $this.children('.carousel-control-next').hide();
    } else {
        $this.children('.carousel-control').show();

    }
}

Answer 1

Я удалил data-ride="carousel", чтобы он не запускался автоматически, установил interval: false и warap: false.
Добавил .d-none ( Bootstrap class ) к control s такони начинают скрываться.

Если есть хотя бы два элемента, то отображается элемент управления next.
Затем на каждом слайде мы проверяем следующую позицию и показываем control соответственно.

var carouselLength = $('.carousel-item').length - 1;

// If there is more than one item
if (carouselLength) {
    $('.carousel-control-next').removeClass('d-none');
}

$('.carousel').carousel({
    interval: false,
    wrap: false
}).on('slide.bs.carousel', function (e) {
    // First one
    if (e.to == 0) {
        $('.carousel-control-prev').addClass('d-none');
        $('.carousel-control-next').removeClass('d-none');
    } // Last one
    else if (e.to == carouselLength) {
        $('.carousel-control-prev').removeClass('d-none');
        $('.carousel-control-next').addClass('d-none');
    } // The rest
    else {
        $('.carousel-control-prev').removeClass('d-none');
        $('.carousel-control-next').removeClass('d-none');
    }
});

.carousel {
    background-color: #ddd;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div id="carousel-1" class="carousel slide">
    <div class="carousel-inner">
        <div class="carousel-item active">
            Slide 1
        </div>
        <div class="carousel-item">
            Slide 2
        </div>
        <div class="carousel-item">
            Slide 3
        </div>
    </div>
    <a class="carousel-control-prev d-none" href="#carousel-1" 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 d-none" href="#carousel-1" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

Answer 2

Вы можете использовать атрибут data-wrap="false", чтобы остановить движение вперед или назад от последнего или первого элемента.

$(document).ready(function(){
  // When strating hide prev arrow
  $('.carousel-control-prev').hide();
});



$('#carousel-1').on('slide.bs.carousel', function (e) {

  var slidingItemsAsIndex = $('.carousel-item').length - 1;

  // If last item hide next arrow
  if($(e.relatedTarget).index() == slidingItemsAsIndex ){
      $('.carousel-control-next').hide();
  }
  else{
      $('.carousel-control-next').show();
  }

  // If first item hide prev arrow
  if($(e.relatedTarget).index() == 0){
      $('.carousel-control-prev').hide();
  }
  else{
      $('.carousel-control-prev').show();
  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div id="carousel-1" class="carousel slide" data-ride="carousel" data-wrap="false">

      <div class="carousel-inner">
        <div class="carousel-item active">
          <img width="900" src="https://cdn.mos.cms.futurecdn.net/FUE7XiFApEqWZQ85wYcAfM-970-80.jpg"/>
        </div>
        <div class="carousel-item">
           <img width="900" src=" https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=81a5f1725ca68c549e0054dcfdf269de&auto=format&fit=crop&w=1350&q=80"/>
        
        </div>
        <div  class="carousel-item">
           <img width="900" src="https://cdn.mos.cms.futurecdn.net/3YKAsCxSpoqFUEHyrQyfLb-650-80.jpg"/>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carousel-1" 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="#carousel-1" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>