引导轮播显示全部图像一次当我使用NG-重复 [英] Bootstrap Carousel showing all images at once when i use ng-repeat
本文介绍了引导轮播显示全部图像一次当我使用NG-重复的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想传送带添加到我的引导3网站。但是，所有图像都显示一次。我从这里 W3Schools的所引用。任何建议吗？
＆LT; DIV CLASS =容器NG-秀=hasImages＆GT;
＆LT; BR＆GT;
＆LT; DIV ID =myCarousel级=旋转木马幻灯片数据骑=旋转木马＆GT;
＆LT;！ - 指标 - ＆GT;
＆LT; OL类=旋转木马指标NG重复=＆GT形象形象;
＆LT;李的数据目标=＃myCarousel数据滑动至=$指数级=$指数== 0主动：？''＆GT;＆LT; /李＆GT;
＆LT; / OL＆GT; ＆LT;！ - 包装幻灯片 - ＆GT;
＆LT; DIV CLASS =旋转木马，内部角色=列表框NG重复=形象形象＆GT;
＆LT; DIV CLASS =$指数== 0项主动：'项目'＆GT;
＆LT; IMG BN-懒-SRC ={{image.fullPath}}称号={{image.description}}ALT =失踪/＆GT;
＆LT; DIV CLASS =旋转木马字幕＆GT;
＆LT; H3＆GT; {{image.name}}＆LT; / H3 GT＆;
＆所述p为H.; {{image.description}}＆下; / P＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT;！ - 左，右控制 - ＆GT;
＆LT;一类=左旋转木马控制的href =＃myCarousel角色=按钮数据滑=preV＆GT;
＆LT;跨度类=glyphicon glyphicon雪佛龙遗ARIA隐藏=真＆GT;＆LT; / SPAN＆GT;
＆LT;跨度类=SR-只有＆GT; previous＆LT; / SPAN＆GT;
＆所述; / A＆GT;
＆LT;一类=右旋转木马控制的href =＃myCarousel角色=按钮数据滑=下一步＆GT;
＆LT;跨度类=glyphicon glyphicon - 雪佛龙权ARIA隐藏=真＆GT;＆LT; / SPAN＆GT;
＆LT;跨度类=SR-只有＆gt;接下来＆LT; / SPAN＆GT;
＆所述; / A＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
这个什么问题吗？ 类=$指数== 0主动：？''
请注意：我使用的3.3.5版本 bootstrap.min.js，bootstrap.min.css 和 jquery.min.js 的1.11.3版本。
修改1 ：我也试过这个（的http：/ /angular-ui.github.io/bootstrap/#/carousel ），我仍面临着同样的问题。所有图像都显示一次。
＆LT; DIV的风格=高度：305px＆GT;
＆LT; UIB传送带间隔=5000不换行=false的＆GT;
＆LT; UIB滑NG重复=subCategorySlideShowImage在subCategorySlideShowImages主动=subCategorySlideShowImage.active＆GT;
＆LT; IMG NG-SRC ={{subCategorySlideShowImage.fullPath}}的风格=保证金：汽车;＆GT;
＆LT; DIV CLASS =旋转木马字幕＆GT;
＆LT; H4＆GT;幻灯{{$指数}}＆LT; / H4＆GT;
＆所述p为H.; {{subCategorySlideShowImage.text}}＆下; / P＆GT;
＆LT; / DIV＆GT;
＆LT; / UIB幻灯片＆GT;
＆LT; / UIB传送带＆GT;
＆LT; / DIV＆GT;
解决方案
您可以使用基于$指数值纳克级的动态设置CSS类，并根据需要设置类。
＆LT; DIV CLASS =容器NG-秀=hasImages＆GT;
＆LT; BR＆GT;
＆LT; DIV ID =myCarousel级=旋转木马幻灯片数据骑=旋转木马＆GT;
＆LT;！ - 指标 - ＆GT;
＆LT; OL类=旋转木马指标NG重复=＆GT形象形象;
＆LT;李的数据目标=＃myCarousel数据滑动至=$指数NG-CLASS ={'积极'：$指数== 0}＆GT;＆LT; /李＆GT;
＆LT; / OL＆GT; ＆LT;！ - 包装幻灯片 - ＆GT;
＆LT; DIV CLASS =旋转木马，内部角色=列表框NG重复=形象形象＆GT;
＆LT; DIV CLASS =项NG-CLASS ={'积极'：$指数== 0}＆GT;
＆LT; IMG BN-懒-SRC ={{image.fullPath}}称号={{image.description}}ALT =失踪/＆GT;
＆LT; DIV CLASS =旋转木马字幕＆GT;
＆LT; H3＆GT; {{image.name}}＆LT; / H3 GT＆;
＆所述p为H.; {{image.description}}＆下; / P＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT;！ - 左，右控制 - ＆GT;
＆LT;一类=左旋转木马控制的href =＃myCarousel角色=按钮数据滑=preV＆GT;
＆LT;跨度类=glyphicon glyphicon雪佛龙遗ARIA隐藏=真＆GT;＆LT; / SPAN＆GT;
＆LT;跨度类=SR-只有＆GT; previous＆LT; / SPAN＆GT;
＆所述; / A＆GT;
＆LT;一类=右旋转木马控制的href =＃myCarousel角色=按钮数据滑=下一步＆GT;
＆LT;跨度类=glyphicon glyphicon - 雪佛龙权ARIA隐藏=真＆GT;＆LT; / SPAN＆GT;
＆LT;跨度类=SR-只有＆gt;接下来＆LT; / SPAN＆GT;
＆所述; / A＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
I'm trying to add a carousel to my Bootstrap 3 website. But, All images are showing at once. I've reference from here w3schools. Any suggestion please?
<div class="container" ng-show="hasImages">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators" ng-repeat="image in images">
<li data-target="#myCarousel" data-slide-to="$index" class="$index == 0 ? 'active' : ''"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" ng-repeat="image in images">
<div class="$index == 0 ? 'item active' : 'item'">
<img bn-lazy-src="{{image.fullPath}}" title="{{image.description}}" alt="missing" />
<div class="carousel-caption">
<h3>{{image.name}}</h3>
<p>{{image.description}}</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Any problem with this? class="$index == 0 ? 'active' : ''"
Note: I'm using bootstrap.min.js, bootstrap.min.css of version 3.3.5 and jquery.min.js of version 1.11.3.
EDIT 1: I also tried this(http://angular-ui.github.io/bootstrap/#/carousel), Still i am facing same problem. All images are showing at once.
<div style="height: 305px">
<uib-carousel interval="5000" no-wrap="false">
<uib-slide ng-repeat="subCategorySlideShowImage in subCategorySlideShowImages" active="subCategorySlideShowImage.active">
<img ng-src="{{subCategorySlideShowImage.fullPath}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{subCategorySlideShowImage.text}}</p>
</div>
</uib-slide>
</uib-carousel>
</div>
解决方案
You can use ng-class dynamically set CSS classes based on the value of $index and set the class as required.
<div class="container" ng-show="hasImages">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators" ng-repeat="image in images">
<li data-target="#myCarousel" data-slide-to="$index" ng-class="{'active': $index == 0}"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" ng-repeat="image in images">
<div class="item" ng-class="{'active': $index == 0}">
<img bn-lazy-src="{{image.fullPath}}" title="{{image.description}}" alt="missing" />
<div class="carousel-caption">
<h3>{{image.name}}</h3>
<p>{{image.description}}</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
这篇关于引导轮播显示全部图像一次当我使用NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
