Остановите Twitter Bootstrap Carousel в конце слайдов

Карусель Bootstrap - странный зверь. Я пытался настроить $ next, чтобы предотвратить бесконечное зацикливание, но в конечном итоге либо сломал его, либо препятствовал обратному движению слайдов при достижении конца.

Я бы хотел, чтобы карусель скользила только по списку, а не бесконечно.

Любая помощь будет оценена.

$next = $next.length ? $next : this.$element.find('.item')[fallback]()
if ($next.hasClass('active')) return
if ($.support.transition && this.$element.hasClass('slide')) {
    this.$element.trigger(e)
    if (e.isDefaultPrevented()) return
    $next.addClass(type)
    $next[0].offsetWidth // force reflow
    $active.addClass(direction)
    $next.addClass(direction)
    this.$element.one($.support.transition.end, function() {
        $next.removeClass([type, direction].join(' ')).addClass('active')
        $active.removeClass(['active', direction].join(' '))
        that.sliding = false
        setTimeout(function() {
            that.$element.trigger('slid')
        }, 0)
    })
} else {
    this.$element.trigger(e)
    if (e.isDefaultPrevented()) return
    $active.removeClass('active')
    $next.addClass('active')
    this.sliding = false
    this.$element.trigger('slid')
}

Обновление: это не имеет отношения к & quot; автозапуску & quot; Я конкретно имею в виду ручное нажатие левой и правой кнопок.

Ответы на вопрос(8)

Добавить атрибутdata-wrap="false" в Div

Самый простой способ сделать это заключается в следующем:

//intro slider
$('#carousel_fade_intro').carousel({
    interval: 2500,
    pause: "false"
})

//Stop intro slider on last item
var cnt = $('#carousel_fade_intro .item').length;
$('#carousel_fade_intro').on('slid', '', function() {
    cnt--;
    if (cnt == 1) {
        $('#carousel_fade_intro').carousel('pause');
    }
});

Коды, размещенные здесь, имеют две проблемы: не работает, если на одной странице имеется более одной карусели, и не работает, если вы нажимаете на точки индикатора. Также вBootstrap 3 событие изменило название.

Приведенный ниже код является обновленной версиейэтот код, И здесь вы можете найти болеедетальное объяснение

checkitem = function() {
  var $this;
  $this = $("#slideshow");
  if ($("#slideshow .carousel-inner .item:first").hasClass("active")) {
    $this.children(".left").hide();
    $this.children(".right").show();
  } else if ($("#slideshow .carousel-inner .item:last").hasClass("active")) {
    $this.children(".right").hide();
    $this.children(".left").show();
  } else {
    $this.children(".carousel-control").show();
  }
};

checkitem();

$("#slideshow").on("slid.bs.carousel", "", checkitem);
 13 мар. 2015 г., 00:47
поскольку вы используете идентификатор в коде, он также не будет работать для более чем одной карусели на одной странице.

если вы используете загрузчик 3 используйте это

$('.carousel').carous,el({
  wrap: false
});
Решение Вопроса

Вы можете просто добавить код на страницу, чтобы скрыть соответствующие элементы управления каруселью послеslid событие:

$('#myCarousel').on('slid', '', function() {
  var $this = $(this);

  $this.children('.carousel-control').show();

  if($('.carousel-inner .item:first').hasClass('active')) {
    $this.children('.left.carousel-control').hide();
  } else if($('.carousel-inner .item:last').hasClass('active')) {
    $this.children('.right.carousel-control').hide();
  }

});

В этом примере предполагается, что разметка используется наTwitter Bootstrap пример карусели.

Обязательно скрывайте левую, когда открываете страницу.

 Zach Shallbetter12 июл. 2012 г., 00:46
Это, вероятно, легче интерпретироватьpastebin.com/DG1UEPu0
 12 июл. 2012 г., 01:08
@ZachShallbetter В отличие от примера Bootstrap, ваши элементы управления вложены немного дальше вниз. Изменение моего кода с$this.children(...) в$this.find(...) должен заставить это работать на вас.children возвращает только первый уровень потомкам вниз, тогда какfind вернет всех потомков. В конце я бы порекомендовал использовать более узкие селекторы, чем пример кода, который я привел в своем ответе.
 05 июн. 2014 г., 10:58
Вот обновленная версия этого кода для Bootstrap 3, которая работает также для действий индикатора и для нескольких каруселей на одной странице:coderpills.wordpress.com/2014/06/05/…
 Zach Shallbetter12 июл. 2012 г., 00:44
Похоже, что это никак не влияет на карусель.pastebin.com/88dSYwcD  Хотелось бы, чтобы у меня было больше информации, но я немного растерялся.
 Zach Shallbetter12 июл. 2012 г., 17:49
Отлично, это сработало хорошо. Я предполагаю, что мне также сначала нужно спрятать первую левую стрелку.

Для людей, которые ищут решение дляBootstrap 3 работает наmultiple carousels на той же странице попробуйте это:

$(function() {
    // init carousel
    $('.carousel').carousel({
        pause: true,        // init without autoplay (optional)
        interval: false,    // do not autoplay after sliding (optional)
        wrap:false          // do not loop
    });
    // init carousels with hidden left control:
    $('.carousel').children('.left.carousel-control').hide();
});

// execute function after sliding:
$('.carousel').on('slid.bs.carousel', function () {
    // This variable contains all kinds of data and methods related to the carousel
    var carouselData = $(this).data('bs.carousel');
    // get current index of active element
    var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));

    // hide carousel controls at begin and end of slides
    $(this).children('.carousel-control').show();
    if(currentIndex == 0){
        $(this).children('.left.carousel-control').fadeOut();
    }else if(currentIndex+1 == carouselData.$items.length){
        $(this).children('.right.carousel-control').fadeOut();
    }
});

Пожалуйста, дайте мне сейчас, если это не работает в вашем случае.

Не уверен, что это применимо только к последней версии Bootstrap, но установил data-wrap = & quot; false & quot; на самом внешнем контейнере карусели будет препятствовать тому, чтобы это прошло мимо последнего понижения.

источник:http://getbootstrap.com/javascript/#carousel-options

Чтобы карусель не выполняла бесконечный цикл (используя Bootstrap 3.0.0), и остановилась на последнем слайде, если только не «следующий». нажата стрелка, вот лучший способ сделать это:

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

Настройкаwrap возможностьfalse приказывает карусели автоматически прекратить движение по слайдам. Я надеюсь, что это отвечает на ваш вопрос правильно.

 24 нояб. 2015 г., 11:24
Это предотвратит переход к следующему слайду после остановки карусели.
 14 июл. 2017 г., 07:22
Спасибо, помогите мне эту вещь сегодня на моем сайте проекта.

Ваш ответ на вопрос