较大引导转盘中的较小引导转盘-较小引导转盘上的旋转功能问题
Smaller bootstrap carousel within Larger bootstrap carousel - functionality issue with rotation on the smaller one
简而言之,我正试图将html块+小转盘放在我的大转盘的一张幻灯片上。基本上,较大规模的转盘将由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> </span></a>
<a class="carousel-control larger right" href="#htmlCarousel" role="button" data-slide="next"><span> </span></a>
<div class="play-container clearfix">
<a href="#">play</a>
</div>
</section>
我在一个zip中添加了必要的文件(1MB),您可以从这里获得这些文件来了解全貌:
转盘内的转盘
编辑:看着控制台,我得到了以下错误,在第一张幻灯片滑开后立即:
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>
相关文章:
- 较大引导转盘中的较小引导转盘-较小引导转盘上的旋转功能问题
- jQuery Div滚动功能:IE中的问题
- 引导工具提示/popover功能问题
- jQuery:窗口大小调整功能问题
- JSTREE - 重命名功能问题(单击重命名后,节点上的文本输入不接受更改)
- 移动版Magento中的缩放功能问题
- 使用IONIC的IOS没有网络连接功能问题
- 多项选择测验-单选按钮和功能问题
- 奇怪的复选框点击功能问题
- 过滤器编号范围功能问题
- <输入类型=“;隐藏的“;功能问题
- JQuery的onclick滑动功能问题
- 在GSP中单击删除功能问题
- Highcharts-图表回流功能问题
- XBMC (Python)的简单登录功能问题
- 动态创建
相关功能问题 - 快速搜索功能问题
- Jquery点击功能问题
- 扑克游戏中的支票、下注或弃牌功能问题(javascript)
- 单选按钮不工作.不确定是按钮的问题还是我的功能问题