-1

i have read and experimented on both of these:

How to output current slide number in Bootstrap 3 Carousel?

How to Get total and Current Slide Number of Carousel

The thing is have 3 (maybe more later) carousels within modals on the same page and that seems to drive bonkers both of the solutions linked above.

What i'm trying to do and i haven't been able to resolve is:

How do i display the actual slide number as (photo X of total Y) in the title of the modal keeping in mind i have many carousels in the same page.

For example I can't use 

$('div.active').index() + 1;

because it always counts the slide number of the first carousel (and it seems to me wasteful since i have to have many copies of the same code for many carousels)

my code constructed from the answers above is:

// Slide number for #carousel1 in class .numslide1 (total counted by itemcar1)
var totalItems = $('.itemcar1').length;
var currentIndex = $('div.active').index() + 1;
$('.numslide1').html('FOTO '+currentIndex+' DE '+totalItems+'');

$('#carousel1').carousel({
    interval: 5000
});

$('#carousel1').bind('slid', function() {
    currentIndex = $('div.active').index() + 1;
    $('.numslide1').html('FOTO '+currentIndex+' DE '+totalItems+'');
});

Thanks in advance!

Community
  • 1
  • 1
Julian
  • 3
  • 1
  • 2

1 Answers1

1

There are several issues with your code. The first item below is definitely going to cause the code to fail:

  1. If you are using Bootstrap 3, you need to use slid.bs.carousel (not 'slid' which was the method from version 2).
  2. You should not be using bind(). It's deprecated. Use the on() method instead.
  3. You really don't need to have multiple handlers for your carousels. You can target with $(this) as used in the example.

JS:

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

  // index is 0-based so add 1 to it
  var txt = 'FOTO '+(currentIndex + 1)+' DE '+total;

  //MAKE SURE that each of your carousels has an element with the class numslide 
  //you don't need to make them unique because we're using this to target 
  $(this).find('.numslide').text(txt);
});

Another recommendation I have is that you don't really need this:

$('#carousel1').carousel({
    interval: 5000
});

Your carousels all must have unique IDs, but you can call all of the carousels (before the handler above) with:

$('.carousel').carousel(); //interval by default is 5000 so you don't need it in the options

You don't really show your HTML, but since they are inside of modals, I recommend not using the data-ride="carousel" in your markup. This would cause the carousel to begin cycling on page load. The result is that not only would the js for each of the carousels be running every 5 seconds to load a new slide, but also the handler will be called 3 times every 5 seconds. This will be really inefficient since the modals are hidden.

Instead, you can use the .carousel('cycle') method when you launch your modal and .carousel('pause') when you hide the modal again. Something like this would do the trick:

$('.modal').on('shown.bs.modal', function () {
  $(this).find('.carousel').carousel('cycle');
});

$('.modal').on('hidden.bs.modal', function () {
  $(this).find('.carousel').carousel('pause');
});

HERE IS A FULL DEMO.

jme11
  • 17,134
  • 2
  • 38
  • 48
  • thanks @jme11 I guess i should have done this from the beginning but here i recreated pretty much what i'm doing: http://jsfiddle.net/9u7rH/2/ i'm sure i'm not understanding correctly something, thanks for the patience. EDIT: Oh, so the problem is i can't display the current slide outside of the carousel itself? – Julian Jun 16 '14 at 15:05
  • No problemo, you got everything in there correctly. There is one difference between your markup and mine. You have the .numslides div in the title of the modal, so you just have to change this line: $(this).find('.numslide').text(txt); to: $(this).parents('.modal').find('.numslide').text(txt); The .find method in jQuery only looks in the descendants, so with this change, we go up in the DOM tree to the parent with the modal class and then use find to find the div with the class numslide inside its descendants. – jme11 Jun 16 '14 at 15:39
  • ...and don't forget the handler only runs after the carousel "slides," so if you want the first slide to show the number of slides (before the first time the slide takes place), you have to set the value once when the page is loaded and jQuery is ready. I'll edit your fiddle to show you how to change that to work with your markup... – jme11 Jun 16 '14 at 15:46
  • You are the best, i can't say i will pay it back but i will definitely pay it forward! – Julian Jun 16 '14 at 15:53