Bootstrap轮播嵌套在bootstrap选项卡“〜active”问题中-Java 学习之路

更新：选项卡也是Bootstrap选项卡 . 换句话说，我在bootstrap选项卡中有一个bootstrap轮播 . 当您选择“tab”引导程序时，会触发其他选项卡的“remove active” . 可悲的是，它渗透到我的旋转木马中并移除了启动旋转木马所需的项目活动类 .

Wordpress单个产品页面tabbable nav-tabs . 在某处有一个jquery监听器，可以在单击时删除/添加选项卡的活动类 . 我在其中一个标签中添加了一个bootstrap轮播，并且标签监听器也删除了第一个元素上的'active'类或我的carousel将其删除 . 我尝试了几个小时跟踪开发工具中的事件，但无法找到监听器来优化目标 . 我尝试用jquery添加它，但删除发生在'add-back'之后 . 在头顶部尝试我的补充，然后在脚中尝试优先于删除侦听器 .

有人熟悉这个吗？我会添加代码，但现在有点多余......

1 回答

大家好，这是一个奇怪的，但我得到了一个很好的答案 . 阅读了数以百万计的帖子后说它无法完成：它如此简单愚蠢！您所要做的就是将.carousel-inner更改为唯一的类名 . 然后你必须像这样手动初始化它：

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

然后添加这16个新的css条目

.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%
}

我的主题从短代码生成html所以我所要做的就是创建一个新的“布局”并对该类进行1次更改 .

回复于 2024-04-28T19:30:54+08:00

Bootstrap轮播嵌套在bootstrap选项卡“〜active”问题中

1 回答

相关问题