Последний элемент карусели Bootstrap скроет правый элемент управления

Я использую версию бутстрапа 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();

    }
}

jquery bootstrap-4 bootstrap-carousel
person Habib    schedule 22.10.2018    source источник
comment
Вы хотите сделать это с помощью jQuery?   -  person SilentCoder    schedule 22.10.2018
comment
да. Я думаю, что jQuery здесь подойдет. Я немного устал, но работа работает исправно.   -  person Habib    schedule 22.10.2018
comment
Поскольку вы хотели спрятаться, то никто не может идти ни вперед, ни назад. Так что проверьте мой ответ, чтобы остановить эту навигацию. если это не поможет решить вашу проблему, дайте мне знать.   -  person SilentCoder    schedule 22.10.2018

Ответы (3)


arrow_upward
9
arrow_downward

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

Если есть хотя бы два элемента, отображается элемент управления next.
Затем на каждом slide мы проверяем следующую позицию и показываем 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>

person azeós    schedule 22.10.2018
comment
Решено :) . Только одно, что нужно знать. Могу ли я скрыть левый элемент управления даже на втором элементе? - person Habib; 22.10.2018
comment
@Habib произвольно по второму пункту? Или 2-й пункт будет последним? Первый if скрывает элемент управления prev, поэтому вы можете заменить оператор на (e.to == 0 || e.to == 1). А вот со 2-го пункта вернуться уже не получится... - person azeós; 22.10.2018

arrow_upward
2
arrow_downward

Вы можете использовать атрибут 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>

person SilentCoder    schedule 22.10.2018
comment
Спасибо, это поможет мне. Но как скрыть левое и правое управление? Левый элемент управления будет скрываться все время, пока он отображается только на последнем элементе. И правый элемент управления будет отображаться все время, но скрываться в последнем элементе. - person Habib; 22.10.2018
comment
Я отредактировал свой код, чтобы скрыть стрелку соответственно. Пожалуйста, отметьте и отметьте как ответ, если проблема решена. - person SilentCoder; 22.10.2018

arrow_upward
0
arrow_downward

Вот общее решение, если вы используете data-ride="false":

 $('.carousel[data-ride="false"]').each(function(){
    $(this).find('.carousel-control-prev').hide();
    $(this).on('slide.bs.carousel', function (e) {
        var slidingItemsAsIndex = $(this).find('.carousel-item').length - 1;
        // If last item hide next arrow
        if($(e.relatedTarget).index() == slidingItemsAsIndex ){
            $(this).find('.carousel-control-next').hide();
        }
        else{
            $(this).find('.carousel-control-next').show();
        }
        if($(e.relatedTarget).index() == 0){
            $(this).find('.carousel-control-prev').hide();
        }
        else{
            $(this).find('.carousel-control-prev').show();
        }
    });
});
person jQuery    schedule 06.04.2020