How to target bootstrap carousel's active slide?

Question

Evening,

Apologies for this likely being a really stupid question, I'm still learning!

I'm trying to target the active slide in the bootstrap carousel to perform an action. I'd like it to trigger some style changes for each of the three slides i.e. changing button colours etc.

Earlier I tried just targeting the divs by their numbers(#1, #2, #3), but kept getting stuck there too, it looked something like this;

var shead = document.getElementById("sub-head");
if ($('#1').is(':visible') && $('#2').is(':hidden') && $('#3').is(':hidden')) {   
    shead.style.color = "blue";
}

I repeated this for each of the slides using :visible & :hidden for each of the divs accordingly, although I only ever seemed to get stuck with the last presentation of the style colour change.

I did a some searching on this and I've seen people using .carousel(1), but I just seem to keep hitting dead ends, can anyone give me a hand with this, not sure why it's not catching, any guidance would be appreciated.

HTML

<header id="Carousel" class="carousel slide carousel-fade">

    <ol class="carousel-indicators">
        <li data-target="Carousel" data-slide-to="0" class="active"></li>
        <li data-target="Carousel" data-slide-to="1"></li>
        <li data-target="Carousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner">
       <div class="item active" id="1"></div>
       <div class="item" id="2"></div>
       <div class="item" id="3"></div>
    </div>

</header>

JAVASCRIPT

if ($('#Carousel').carousel(1).hasClass('active')) {
    alert("this is an alert");
}

Answer 1

Edit: This answer was written for Bootstrap 3, but it should work for bootstrap 4 as well. See the following link for bootstrap 4 docs https://getbootstrap.com/docs/4.0/components/carousel/#events.

Bootstrap has custom events you can hook to.

This event will fire when the method is going to slide.

$('#Carousel').on('slide.bs.carousel', function onSlide (ev) {
  var id = ev.relatedTarget.id;
  switch (id) {
    case "1":
      // do something the id is 1
      break;
    case "2":
      // do something the id is 2
      break;
    case "3":
      // do something the id is 3
      break;
    default:
      //the id is none of the above
  }
})

There is also a slid.bs.carousel event. This event is invoked when the slider is finished sliding.

You can read about the differences here https://getbootstrap.com/docs/3.3/javascript/#carousel-events.

P.S. note that ev is the event object that is passed to the onSlide callback when the event was triggered. Note that the name ev could have been changed to anything, for example event, it's the order of the parameter in the callback that determines its value not its name. Here the event object is passed in as the first parameter of the callback, this is due not to the above code having named the parameter accordingly ev (although that helps with understanding), but by how the jQuery code calls passed in event handlers (event handlers are a form of callback meant for events) and how the bootstrap code triggers the events. The event object has common properties to a regular JavaScript event, and it has the additional properties given here in the bootstrap 4 docs for carousel events (with its current properties shown below as well in the yellow quote block).

direction: The direction in which the carousel is sliding (either "left" or "right").
relatedTarget: The DOM element that is being slid into place as the active item.
from: The index of the current item.
to: The index of the next item.

Answer 2

You can use the self bootstrap events parameters "from" and "to" to get the indexes like this:

var myCarousel = document.getElementById('#myCarousel')

    myCarousel.addEventListener('slide.bs.carousel', function (ev) {
        console.log(ev.from);
    })