javascript – 较大的bootstrap轮播中较小的bootstrap轮播 – 在较小的一个旋转上的功能问题

2024年1月4日 172次阅读

简而言之,我正在尝试将html block小型旋转木马放在我的大型旋转木马的其中一张幻灯片上.基本上,较大规模的旋转木马将由2个幻灯片组成.

第一张幻灯片 – html较小的旋转木马(由2张图片组成 – 幻灯片本身).
第二张幻灯片 – 一个大型英雄形象

使用Bootstrap 3.3.6和jQuery 2.2.3.

所以一切都很好,在当前状态下,所有幻灯片第一次都可以正常工作.幻灯片从最后一张到第一张幻灯片时,较小的转盘的功能不再起作用.我相信问题出现在Bootstrap.js内的.item .active类中,因为更改/修改css对功能没有任何影响

我一直在搜索互联网,但找不到合适的答案.

如果能得到及时答复,我将非常感激:)

HTML

#htmlCarousel {
  width: 1100px;
}
#smallCarousel {
  width: 550px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<section id="htmlCarousel" class="pr carousel slide clearfix" data-ride="carousel">
  <ol class="carousel-indicators no-margin">
    <li data-target="#htmlCarousel" data-slide-to="0" class="active padd-t-10">1</li>
    <li data-target="#htmlCarousel" data-slide-to="1" class="padd-t-10">2</li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item one active">
      <div class="col-lg-4 col-sm-4 left-col clearfix">
        <p class="f24">Maecenas sed diam eget</p>
        <p>Lorem ipsum</p>
      </div>
      <div class="col-lg-7 col-sm-7 right-col clearfix">
        <ul class="uppercase clearfix">
          <li><a href="#">Visit site</a>
          </li>
          <li><a href="#">Tweet</a>
          </li>
        </ul>
        <div id="smallCarousel" class="carousel slide clearfix" data-ride="carousel">

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item one active">
              <img src="http://placehold.it/350x150" alt="Fourth slide">
            </div>
            <div class="item two">
              <img src="http://placehold.it/350x150" alt="Fifth slide">
            </div>
          </div>

          <!-- Left and right controls -->
          <a class="carousel-control left" href="#smallCarousel" role="button" data-slide="prev"></a>
          <a class="carousel-control right" href="#smallCarousel" role="button" data-slide="next"></a>
        </div>

      </div>
      <button class="padd-10"><span class="uppercase padd-l-15 padd-r-5">Read more</span>
      </button>
    </div>
    <div class="item two">
      <img src="http://placehold.it/350x150" alt="Random slide" />
    </div>
  </div>
  <a class="carousel-control larger left" href="#htmlCarousel" role="button" data-slide="prev"><span>&nbsp;</span></a>
  <a class="carousel-control larger right" href="#htmlCarousel" role="button" data-slide="next"><span>&nbsp;</span></a>
  <div class="play-container clearfix">
    <a href="#">play</a>
  </div>
</section>

我已经在zip中添加了必要的文件(1MB),您可以从这里了解完整的图片：

Carousel-within-carousel

编辑：看到控制台我得到以下错误,第一张幻灯片滑开后立即：

bootstrap336.js:6 
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
c.slide @ bootstrap336.js:6
c.next @ bootstrap336.js:6
n.isFunction.f @ jquery223.js:2

最佳答案 Bootstrap不支持嵌套轮播(参见
http://getbootstrap.com/javascript/#carousel).我认为这是主要问题.您可以尝试一些更优雅的东西,例如这个单页设计,其中还包括Ritesh Kumar左右滚动(使用fullpage.js)：

http://codepen.io/ritz078/pen/wMPRzr

例如：

<section class="vertical-scrolling">
   <div class="horizontal-scrolling">
      <h2>fullPage.js</h2>
      <h3>This is the fifth section and it contains the first slide (actually section == first slide)</h3>
   </div>
   <div class="horizontal-scrolling">
      <h2>fullPage.js</h2>
      <h3>This is the second slide</h3> 
      <p class="end">Thank you!</p>
   </div>
</section>
点赞