gpt4 book ai didi

angularjs - Bootstrap 轮播不适用于 angularjs

转载 作者:行者123 更新时间:2023-12-03 09:33:13 25 4
gpt4 key购买 nike

我想使用 Bootstrap 轮播和 Angular js 在轮播内容中显示图像。
但是,当点击导航链接时,它会显示空白页面。

我的代码示例如下。 ( 注意 :此代码仅适用于 Bootstrap 3.1.0 但不适用于 AngularJS 1.2.13 )

<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="Carousel" data-slide-to="0" class="active"></li>
<li data-target="Carousel" data-slide-to="1"></li>
<li data-target="Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/c.png" class="img-responsive">
</div>
<div class="item">
<img src="images/b.png" class="img-responsive">
</div>
<div class="item">
<img src="images/a.png" class="img-responsive">
</div>
</div>
<a class="left carousel-control" href="#Carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#Carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

最佳答案

建立在 rbanning 所说的基础上,而不是添加事件处理程序,您可以在用 span 标签替换 anchor 标签后,用“data-target”属性替换 href 属性,然后 Bootstrap 负责其余的工作。

像这样:

<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="Carousel" data-slide-to="0" class="active"></li>
<li data-target="Carousel" data-slide-to="1"></li>
<li data-target="Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/c.png" class="img-responsive">
</div>
<div class="item">
<img src="images/b.png" class="img-responsive">
</div>
<div class="item">
<img src="images/a.png" class="img-responsive">
</div>
</div>
<span class="left carousel-control" data-target="#Carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</span>
<span class="right carousel-control" data-target="#Carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</span>
</div>

关于angularjs - Bootstrap 轮播不适用于 angularjs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21907843/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com