Bootstrap nested carousels active controls

Question

I have a problem with Bootstrap nested carousels; On click of the intern carousel it changes also the the active li of the extern carousel, which ist not correct.

Also o

Answer 1

basically, nested carousel is not supported, find more information on github

But you can try for some workaround (worked for me), like an example below (i'm using jquery), where i will temporarily change the "active" class of item insides child-carousel(s). And add it back after the event on parent carouse has completed

btn.on("click", function () {
                /*
                 Fix for Nested Carousel:
                 Before any sliding action, need to "hide" inner carouse active items
                 After sliding action, update active items again
                 */

                $.each(carourselInnerHolder.find(".child-carousel.active"), function (i, item) {
                    $(item).removeClass("active").addClass("active-fix-nested");
                });


                setTimeout(function() {
                    Metronic.unblockUI(); //blockUI to avoid multiple actions immediately
                }, 200);

                carouselHolder.carousel(carouselIndex); // action that trigger update parent Carousel to slide to new item with this index

                $.each(carourselInnerHolder.find(".child-carousel.active-fix-nested"), function (i, item) {
                    $(item).addClass("active").removeClass("active-fix-nested");
                });

                /*
                 END Fix for Nested Carousel
                 */

            });