【问题标题】:Bootstrap carousel nested in bootstrap tab "~ active" issue嵌套在引导选项卡“~活动”问题中的引导轮播
【发布时间】:2018-11-24 17:51:56
【问题描述】:

更新:这些选项卡也是 Bootstrap 选项卡。所以换句话说,我在引导选项卡中有一个引导轮播。当您选择“选项卡”时,引导程序会为其他选项卡触发“删除活动”。可悲的是,它渗入了我的轮播并删除了启动轮播所需的项目活动类。

Wordpress 单个产品页面可标签的导航标签。某处有一个 jquery 侦听器,可在单击时为选项卡删除/添加活动类。我在其中一个选项卡中添加了一个引导轮播,并且选项卡侦听器也正在删除第一个元素上的“活动”类,或者我的轮播将其杀死。我尝试了几个小时在开发工具中跟踪事件,但找不到细化目标的侦听器。我尝试使用 jquery 将其添加回来,但删除是在“添加回”之后发生的。在头顶尝试了我的 add-back,然后在脚下尝试优先于 Remove 侦听器。

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

【问题讨论】:

    标签: jquery wordpress bootstrap-carousel


    【解决方案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,所以我所要做的就是创建一个新的“布局”并对类进行第一次更改。

    【讨论】:

      猜你喜欢
      • 2019-07-31
      • 1970-01-01
      • 2017-06-19
      • 2015-12-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多