星空网 > 软件开发 > Java

Bootstrap嵌套轮播

Bootstrap的轮播通过以下层次的html代码实现:

<div id="CarouselId">
  <div >
    <div >

      <div id="CarouselId1">

        <div >

          <div >第二层容器第一帧的内容</div>
          <div >第一层容器第二帧的内容</div>

          ……

        </div>

        <ol >
          <li data-slide-to="0" data-target="#CarouselId1"></li>
          <li data-slide-to="1" data-target="#CarouselId1"></li>
          <li data-slide-to="2" data-target="#CarouselId1"></li>

          ……
        </ol> 

        <a data-slide="prev" href="#CarouselId1"></a>
        <a data-slide="next" href="#CarouselId1"></a>

      </div>

    </div>
    <div >第一层容器第一帧的内容</div>
    <div >第一层容器第二帧的内容</div>

    ……

  </div>

  <ol >
    <li data-slide-to="0" data-target="#CarouselId"></li>
    <li data-slide-to="1" data-target="#CarouselId1"></li>
    <li data-slide-to="2" data-target="#CarouselId1"></li>

    ……
  </ol> 

  <a data-slide="prev" href="#CarouselId"> </a>
  <a data-slide="next" href="#CarouselId"> </a>
</div>

但如果

 <div ></div>

中要嵌套轮播的话,现有的代码就会出问题,因为javascript中的事件绑定中,选择元素使用了find方法,初始化时第一层id为CarouselId的轮播容器选择class为item时将item里面嵌套的item也选取了,同样选取所有class为carousel-indicators的子元素时也嵌套选取,需要手动修改用children选择第一级子元素。




原标题:Bootstrap嵌套轮播

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

海外仓是否真的适合跨境中小卖家?:https://www.ikjzd.com/articles/3823
遭受网络攻击5天后,中远航运恢复服务!:https://www.ikjzd.com/articles/3824
货物如果被海关查验应该怎么处理:https://www.ikjzd.com/articles/3831
Etsy进军印度市场,印度手工电商市场新添一猛虎!:https://www.ikjzd.com/articles/3832
美国科技股市值暴跌,拼多多深陷售假风波:https://www.ikjzd.com/articles/3833
根据Wish的产品数据进一步打造出爆款:https://www.ikjzd.com/articles/3835
深圳有没有比较好玩的景点 深圳有没有比较好玩的景点推荐一下:https://www.vstour.cn/a/366175.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流