web-dev-qa-db-fra.com

Arrêtez Twitter Bootstrap Carousel à la fin de ses diapositives

Le carrousel Bootstrap est une bête étrange. J'ai essayé d'ajuster $ next pour éviter les boucles infinies, mais je finis par le casser ou par empêcher les diapositives de revenir en arrière lorsqu'elles atteignent la fin.

Je voudrais que le carrousel ne glisse que dans la liste et non en boucle infinie. 

Toute aide serait appréciée.

$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')
}

Mise à jour: Cela n'a aucun rapport avec "lecture automatique". Je parle spécifiquement d'appuyer manuellement sur les boutons gauche et droit.

javascriptjquerytwitter-bootstrapcarousel
15
Zach Shallbetter

Vous pouvez simplement ajouter du code à la page pour masquer les contrôles de carrousel appropriés après un événement 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();
  }

});

Cet exemple suppose que le balisage utilisé sur l'exemple de carrousel Twitter Bootstrap.

Assurez-vous de masquer celui de gauche lorsque vous ouvrez la page.

14
merv

Pour que le carrousel ne boucle pas à l'infini (à l'aide de Bootstrap 3.0.0) et s'arrête à la dernière diapositive, sauf si vous cliquez sur la flèche "suivante", voici le meilleur moyen de le faire:

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

Définir l'option wrap sur false indique au carrousel de cesser de parcourir les diapositives automatiquement. J'espère que cela répond correctement à votre question.

23
Daniely

La manière la plus simple de procéder est la suivante:

//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');
    }
});
3
ryanka

Ajouter l'attribut data-wrap="false" dans Div

3
royalyadnesh

Pour ceux qui recherchent une solution pour Bootstrap 3 qui travaille pour plusieurs carrousels sur la même page, essayez ceci:

$(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();
    }
});

S'il vous plaît laissez-moi maintenant si cela ne fonctionne pas dans votre cas.

1
Karl Adler

Vous ne savez pas si cela concerne uniquement la version la plus récente de Bootstrap, mais définir data-wrap = "false" sur le conteneur du carrousel le plus à l'extérieur l'empêchera de passer au-delà de la dernière diapositive.

source: http://getbootstrap.com/javascript/#carousel-options

1
DataCat Robin

si vous utilisez bootstrap 3 utilisez ceci

$('.carousel').carousel({
  wrap: false
});
1
Shuhad zaman

Les codes affichés ici ont deux problèmes: ne fonctionne pas si vous avez plus d'un carrousel sur la même page et ne fonctionne pas si vous cliquez sur les points indicateurs. De plus, dans Bootstrap 3 l'événement a changé de nom. 

Le code ci-dessous est une version mise à jour de ce code . Et ici vous pouvez trouver un plus _ { explication détaillée } _

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);
0
Fred K