引导轮播显示全部图像一次当我使用NG-重复 [英] Bootstrap Carousel showing all images at once when i use ng-repeat
问题描述
我想传送带添加到我的引导3网站。但是,所有图像都显示一次。我从这里 W3Schools的所引用。任何建议吗?
< DIV CLASS =容器NG-秀=hasImages>
< BR>
< DIV ID =myCarousel级=旋转木马幻灯片数据骑=旋转木马>
<! - 指标 - >
< OL类=旋转木马指标NG重复=&GT形象形象;
<李的数据目标=#myCarousel数据滑动至=$指数级=$指数== 0主动:?''>< /李>
< / OL> <! - 包装幻灯片 - >
< DIV CLASS =旋转木马,内部角色=列表框NG重复=形象形象>
< DIV CLASS =$指数== 0项主动:'项目'>
< IMG BN-懒-SRC ={{image.fullPath}}称号={{image.description}}ALT =失踪/>
< DIV CLASS =旋转木马字幕>
< H3> {{image.name}}< / H3 GT&;
&所述p为H.; {{image.description}}&下; / P>
< / DIV>
< / DIV>
< / DIV> <! - 左,右控制 - >
<一类=左旋转木马控制的href =#myCarousel角色=按钮数据滑=preV>
<跨度类=glyphicon glyphicon雪佛龙遗ARIA隐藏=真>< / SPAN>
<跨度类=SR-只有> previous< / SPAN>
&所述; / A>
<一类=右旋转木马控制的href =#myCarousel角色=按钮数据滑=下一步>
<跨度类=glyphicon glyphicon - 雪佛龙权ARIA隐藏=真>< / SPAN>
<跨度类=SR-只有>接下来< / SPAN>
&所述; / A>
< / DIV>
< / DIV>
这个什么问题吗? 类=$指数== 0主动:?''
请注意:我使用的3.3.5版本 bootstrap.min.js,bootstrap.min.css
和 jquery.min.js
的1.11.3版本。
修改1 :我也试过这个(的http:/ /angular-ui.github.io/bootstrap/#/carousel ),我仍面临着同样的问题。所有图像都显示一次。
< DIV的风格=高度:305px>
< UIB传送带间隔=5000不换行=false的>
< UIB滑NG重复=subCategorySlideShowImage在subCategorySlideShowImages主动=subCategorySlideShowImage.active>
< IMG NG-SRC ={{subCategorySlideShowImage.fullPath}}的风格=保证金:汽车;>
< DIV CLASS =旋转木马字幕>
< H4>幻灯{{$指数}}< / H4>
&所述p为H.; {{subCategorySlideShowImage.text}}&下; / P>
< / DIV>
< / UIB幻灯片>
< / UIB传送带>
< / DIV>
您可以使用基于$指数值纳克级的动态设置CSS类,并根据需要设置类。
< DIV CLASS =容器NG-秀=hasImages>
< BR>
< DIV ID =myCarousel级=旋转木马幻灯片数据骑=旋转木马>
<! - 指标 - >
< OL类=旋转木马指标NG重复=&GT形象形象;
<李的数据目标=#myCarousel数据滑动至=$指数NG-CLASS ={'积极':$指数== 0}>< /李>
< / OL> <! - 包装幻灯片 - >
< DIV CLASS =旋转木马,内部角色=列表框NG重复=形象形象>
< DIV CLASS =项NG-CLASS ={'积极':$指数== 0}>
< IMG BN-懒-SRC ={{image.fullPath}}称号={{image.description}}ALT =失踪/>
< DIV CLASS =旋转木马字幕>
< H3> {{image.name}}< / H3 GT&;
&所述p为H.; {{image.description}}&下; / P>
< / DIV>
< / DIV>
< / DIV> <! - 左,右控制 - >
<一类=左旋转木马控制的href =#myCarousel角色=按钮数据滑=preV>
<跨度类=glyphicon glyphicon雪佛龙遗ARIA隐藏=真>< / SPAN>
<跨度类=SR-只有> previous< / SPAN>
&所述; / A>
<一类=右旋转木马控制的href =#myCarousel角色=按钮数据滑=下一步>
<跨度类=glyphicon glyphicon - 雪佛龙权ARIA隐藏=真>< / SPAN>
<跨度类=SR-只有>接下来< / SPAN>
&所述; / A>
< / DIV>
< / DIV>
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屋!