Arrêter de Twitter Bootstrap Carrousel à la fin de ses diapositives

Le Bootstrap carrousel est une drôle de bête. J'ai essayé de bidouiller $en regard de prévenir l'infini en boucle, mais finit par le casser ou de prévenir les diapositives de revenir en arrière lorsque vous atteignez la fin.

Je voudrais le carrousel à seulement glisser dans la liste et pas de boucle à l'infini.

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: Ceci est sans rapport avec "autoplay" je suis en se référant spécifiquement aux manuellement en appuyant sur les boutons gauche et droit.

OriginalL'auteur Zach Shallbetter | 2012-07-11

  1. 14

    Vous pouvez simplement ajouter un peu de code de la page pour masquer la appropriée carrousel des commandes après un slid événement:

    $('#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 les balises utilisées sur la Twitter Bootstrap exemple carrousel.

    Assurez-vous de cacher la gauche lorsque vous ouvrez la page.

    Il ne semble pas avoir d'effet sur le carrousel à tous. pastebin.com/88dSYwcD seulement j'avais plus d'information, mais je suis un peu à perte.
    C'est probablement plus facile à interpréter pastebin.com/DG1UEPu0
    Contrairement à l'Amorçage exemple, vos éléments de contrôle sont imbriquées l'une un peu plus loin vers le bas. Changer mon code de $this.children(...) à $this.find(...) devrait le faire fonctionner pour vous. children ne renvoie d'abord au niveau descendants, alors que find sera de retour tous les descendants. En fin de compte, je vous conseille d'utiliser plus étroite sélecteurs que le code de l'exemple que je donne dans ma réponse.
    Excellent, ça a bien marché. Je suppose que je vais devoir cacher la première flèche de gauche d'abord.
    Voici une version mise à jour de ce code de Bootstrap 3, qui travaille également pour l'indicateur actions et pour de multiples carrousel dans la même page: coderpills.wordpress.com/2014/06/05/...

    OriginalL'auteur merv

  2. 23

    Pour le carrousel de ne pas infiniment boucle (à l'aide de Bootstrap 3.0.0), et s'arrêter à la dernière diapositive, à moins que la "prochaine" flèche est cliqué, la suivante est la meilleure façon de le faire:

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

    Réglage de la wrap option pour false dit le carrousel pour arrêter la à vélo à travers les diapositives automatiquement. J'espère que cela répond à votre question correctement.

    Cela permettra d'éviter d'aller à la diapositive suivante, une fois que le carrousel arrêté ...
    Grâce à son aide-moi cette chose aujourd'hui sur mon un de la projet de site web.

    OriginalL'auteur Daniely

  3. 3

    La façon la plus simple de le faire est comme suit:

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

    OriginalL'auteur ryanka

  4. 3

    Ajouter un attribut data-wrap="false" en Div

    OriginalL'auteur royalyadnesh

  5. 1

    si vous êtes en utilisant bootstrap 3 utiliser cette

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

    OriginalL'auteur Shuhad zaman

  6. 1

    Ne sais pas si c'est uniquement associé à la dernière version de Bootstrap, mais les données de réglage-wrap="false" sur le ultrapériphériques carrousel contenant ne l'empêchent de le poursuivre passé la dernière diapositive.

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

    OriginalL'auteur DataCat Robin

  7. 1

    Pour les personnes à la recherche d'une solution pour Bootstrap 3 de travail 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.

    OriginalL'auteur Karl Adler

  8. 0

    Les codes posté ici 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 l'indicateur de points. Aussi, 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);
    puisque vous utilisez un ID dans le code, il ne fonctionnera pas pour plus d'un carrousel sur la même page.

    OriginalL'auteur Fred K