0

I have 3 bootstrap carousels (just one is visible, depending on what you click here): enter image description here

All of them are working the same. If I click another slide, this is activated (adds class selected). It looks like this: enter image description here

But when its auto-sliding to another slide, this slide doesnt show as activated (not adding class selected) and I dont know why its not working. enter image description here

Question is regarding this page: https://bm-translations.de/km.php#video

my code: 

// handles the carousel buttons
$('[id^=carousel-selector-]').click( function(){
  var id_selector = $(this).attr("id");
  var id = id_selector.substr(id_selector.length -1);
  id = parseInt(id);
  $('.carousel').carousel(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $(this).addClass('selected');
});

// when the carousel slides, auto update
$('.carousel').on('slide.bs.carousel', function (e) {
  var id = $('.item.active').data('slide-number');
  id = parseInt(id)+1;
  $('[id^=carousel-selector-]').removeClass('selected');
  $('[id=carousel-selector-'+id+']').addClass('selected');
});

On auto slide its not adding the class selected, but its doing on click. Whats wrong with my code?

Krystian
  • 887
  • 5
  • 21
  • 52
  • Question is unclear, please explain what are you upto, what is the expected behavior, and whats going wrong in 3 separate paragraphs, this breaks up the question understandable by all. – Munim Munna Apr 15 '18 at 06:42
  • @MunimMunna I edited the question, hope its more clear. – Krystian Apr 15 '18 at 06:47

2 Answers2

1

The problem with the auto carousel function seems to be that your "id" is not correct because the selector to grab it doesn't target the right element.

You need to target the current "selected" item. Right now, because your "id" is not being retrived here:
var id = $('.item.active').data('slide-number');

ideally your "selected" class should be in your <li>, so you can grab the index easily, but if you wanted to grab the correct id the way you have it right now you could grab the index like this:

var id = $("#carouselMarketing1 a.selected").parent().index();

or

var id = $("#carouselMarketing1 a.selected").parent().attr("data-slide-to")

EDIT:

After taking a second look I see that your problem is that the issue is related to trying to retrieve the id having multiple carousels, thanks for the comment on that.

This is what worked for me:

id = $(a.currentTarget).find('.item.active').index()

basically you're just getting the id of the active item under the currently selected carousel.

Ignacio
  • 1,056
  • 8
  • 17
  • I tried it with `var id = $("a.selected").parent().index();` but its not working properly. I cannot use an ID as I have 3 different carousels with 3 different IDs. – Krystian Apr 15 '18 at 07:51
  • not sure what you mean by " I cannot use an id", can you explain further – Ignacio Apr 15 '18 at 07:53
  • I have 3 carousels. Depending on what you click (see first pic in question) "Online-Marketing", "Design" or "Webentwicklung" another carousel with an specific ID appears. So I cannot target `#carouselMarketing1` as I also have `#carouselDesign1` and `#carouselWebentwicklung1`. All of them are auto-sliding and should of course change the active item. – Krystian Apr 15 '18 at 07:56
  • oh, is that what you mean, no worries, you can target it generically let me edit the response – Ignacio Apr 15 '18 at 07:57
0

You are using on to bind slide.bs.carousel, but this not a jQuery event. You have to use bind instead.

$('.carousel').bind('slide.bs.carousel', function(e){
    var $this = $(this), index = $this.find('.item.active').index();
    var $sliderButtons = $this.find('[data-slide-to] a');
    $sliderButtons.eq(index).removeClass('selected');
    $sliderButtons.eq( index+1 < $sliderButtons.length ? index+1 : 0).addClass('selected');
});
Munim Munna
  • 17,178
  • 6
  • 29
  • 58