web-dev-qa-db-fra.com

Comment obtenir le nombre total et actuel de diapositives du carrousel

Pouvez-vous s'il vous plaît laissez-moi savoir comment je peux obtenir le nombre total et actuel des coulisses du carrousel dans le bootstrap comme dans l'image ci-dessous?

Image showing current page and total number of pages

J'ai un carrousel Bootstrap standard et un <div> avec la classe .num pour afficher le nombre total et actuel et j'ai utilisé ce code pour récupérer les numéros, mais il n'a pas été traité.

$('.num').html(){
  $('#myCarousel').carousel({number})
}

Merci

Mettre à jour:

S'il vous plaît trouver un échantillon à cette jsfiddle LIEN

jquerytwitter-bootstrapslidercarousel
21
Mona Coder

Chaque slide a une classe .item, vous pouvez obtenir le nombre total de diapositives comme ceci 

var totalItems = $('.item').length;

Active slide a une classe nommée active, vous pouvez obtenir l'index de active slide comme ceci

var currentIndex = $('div.active').index() + 1;

Vous pouvez mettre à jour ces valeurs en liant l'événement slid du carrousel de démarrage comme ceci

$('#myCarousel').bind('slid', function() {
    currentIndex = $('div.active').index() + 1;
   $('.num').html(''+currentIndex+'/'+totalItems+'');
});

EXEMPLE

60
Khawer Zeshan

Mise à jour du code de @Khawer Zeshan

Pour Bootstrap 3.0+, utilisez slid.bs.carousel au lieu de slid et on au lieu de bind Donc, le code de mise à jour sera comme ça

var totalItems = $('.item').length;
var currentIndex = $('div.active').index() + 1;

$('#myCarousel').on('slid.bs.carousel', function() {
    currentIndex = $('div.active').index() + 1;
   $('.num').html(''+currentIndex+'/'+totalItems+'');
});
11
IqbalBary
var totalItemsPop = $('#Mycarousel .item').length; 
$('#Mycarousel').on('slide.bs.carousel', function() {
       setTimeout(function(){ 
            currentIndexPop = $('#Mycarousel div.active').index() + 1;
            $('.num').html('' + currentIndexPop + '/' + totalItemsPop + '');
         }, 1000);
   });

after slide event div sera actif et ne pourra pas obtenir l'index actif, alors gardez votre code dans la fonction de délai d'expiration

4
Mithun Billara

Bootstrap 3.2+:

carouselData.getItemIndex(carouselData.$element.find('.item.active'))
3
user3221264

Le seul inconvénient du code ci-dessous sera qu'il ne sera pas affiché avant que vous ne passiez à la diapositive suivante (déclenche après chaque changement de diapositive).

JS/jQuery 

$('#carousel-slide').on('slid.bs.carousel', function () {
  var carouselData = $(this).data('bs.carousel');
  var currentIndex = carouselData.getActiveIndex();
  var total = carouselData.$items.length;

  var text = (currentIndex + 1) + " of " + total;
  $('#carousel-index').text(text);
});

HTML 

<div id="carousel-index">
  <!-- Number will be added through JS over here -->
</div>
0
Syed

Vous pouvez utiliser la fonction jquery index () pour obtenir l’index actuel de l’élément actif dans la liste des éléments. Donc, le code ressemble à ceci:

var currentItem = $("#carousel-1 .item.active" );
var currentIndex = $('#carousel-1 .item').index(currentItem) + 1;
0
M Kaweepatt Churcharoen