Bootstrap carousel nested in bootstrap tab "~ active" issue

Question

Update: The tabs is also Bootstrap tabs. So in other words, i have a bootstrap carousel in a bootstrap tab. When you select the 'tab' bootstrap fires off a 'remove active' for the other tabs. Sadly it bleeds down into my carousel and removes the item active class needed to start the carousel.

Wordpress single product page tabbable nav-tabs. There is a jquery listener somewhere that removes/adds active class for the tabs on click. I added a bootstrap carousel in one of the tabs and the tab listener is also removing the 'active' class on the first element or my carousel killing it. I tried for hours tracing events in dev tools but cant find the listener to refine the target. I tried adding it back with jquery but the remove is happening after the 'add-back'. Tried my add-back in the very top of the head, and then in the foot to try to get priority over the Remove listener.

Anyone familiar with this? I'd add code but thats sort of redundant now...

score 0 · Answer 1 · answered Jun 15 '18 at 15:48

OK everyone, this was a weird one but i got a great answer. After reading millions of posts saying it cant be done: Its so simple its silly! All you have to do is change .carousel-inner to a unique classname. Then you have to manually initialize it like this:

$('.carousel-inner-product-single').carousel({
  interval: 2000
})

Then add these 16 new css entries

.carousel-inner-product-single {
    position: relative;
    width: 100%;
    overflow: hidden
}
.carousel-inner-product-single>.item {
    position: relative;
    display: none;
    -webkit-transition: .6s ease-in-out left;
    transition: .6s ease-in-out left
}
.carousel-inner-product-single>.item>img, .carousel-inner-product-single>.item>a>img {
    display: block;
    height: auto;
    max-width: 100%;
    line-height: 1
}
.carousel-inner-product-single>.active, .carousel-inner-product-single>.next, .carousel-inner-product-single>.prev {
    display: block
}
.carousel-inner-product-single>.active {
    left: 0
}
.carousel-inner-product-single>.next, .carousel-inner-product-single>.prev {
    position: absolute;
    top: 0;
    width: 100%
}
.carousel-inner-product-single>.next {
    left: 100%
}
.carousel-inner-product-single>.prev {
    left: -100%
}
.carousel-inner-product-single>.next.left, .carousel-inner-product-single>.prev.right {
    left: 0
}
.carousel-inner-product-single>.active.left {
    left: -100%
}
.carousel-inner-product-single>.active.right {
    left: 100%
}

my theme generates the html from a shortcode so i all i had to do is create a new "layout" and make the 1 change to the class.

Bootstrap carousel nested in bootstrap tab "~ active" issue

1 Answers1