The method is to trigger the event immediately when the slide changes, $ (' #myCarousel '). On (' Slide.bs.carousel ', function () {$ ("#myCarousel ol li"). Toggleclass (" Active ");//Duplicate switch class name" active "});
Problem: When loading is set in the dynamically loaded carousel, the Carousel data-ride= "Carousel" picture can be carousel but the Li tag class underneath does not switch. Without data-ride= "Carousel" will not automatically carousel, but point <a class= ' left Carousel-control ' href= ' #myCarousel ' data-slide= ' prev ' >< I class= ' Icon-prev fa fa-angle-left ' ></i></a> trigger a slide will start the carousel, and the picture and Li tags are working properly. Viewed. css and. JS did not progress, and later looked back carefully over the bootstrap of the Carousel tutorial, tried many ways to make progress.
Workaround: Slide.bs.carousel is the event to be used in the bootstrap Carousel (Carousel) plug-in, and the main usage is to trigger the event immediately when the slide instance method is invoked (when the carousel completes the slide transition effect). The event. Toggleclass is the duplicate switch class name.
Dynamic add removal of class= "active" in the Li tag in bootstrap in the dynamically loaded picture carousel