How to target a boot carousel?

Question

Evening

Sorry for the fact that this is probably a really stupid question, I'm still studying!

I am trying to target the active slide in a carousel to complete an action. I would like it to trigger some style changes for each of the three slides, i.e. Changed the colors of buttons, etc.

I used to just try to target divs by their numbers ( #1, #2, #3 ), but kept stuck there, 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 and :hidden for each of the divs, respectively, although I only ever went in cycles in the last presentation of the style color change.

I did a few searches about this and I saw people using .carousel(1) , but I just seem to continue the dead end, can someone give me a hand with this, not sure why it is not catching, there are no indications to 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. See the following link to download documentation 4: https://getbootstrap.com/docs/4.0/components/carousel/#events .

Bootstrap has custom events that you can connect to.

This event will fire when the method slides.

 $('#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 fired when the slider has finished sliding.

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

PS note that ev is an event object that is passed onSlide to the onSlide call when the event was triggered. Note that the ev name could be changed to anything, for example, to event , that is, the order of the parameter in the callback, which determines its value, and not its name. Here, the event object is passed as the first callback parameter, this is not due to the fact that the parameter with the corresponding ev value is named in the above code (although this helps to understand), but to the way jQuery code calls are passed in event handlers (event handlers is a callback form intended for events) and how the bootstrap code raises events. An event object has common properties for a regular JavaScript event , and it has additional properties listed here in the bootstrap 4 documentation for carousel events (its current properties are shown below, as well as in the yellow quotation block).

direction : the direction in which the carousel slides ("left" or "right").
relatedTarget : a DOM element that is inserted into place as the active element.
from : The index of the current item.
to : Index of the next item.