我的引导旋转木马幻灯片似乎没有工作,即使我尝试了其他答案在这里(其中一个是this。引导旋转木马幻灯片按键不灵
但几乎所有的人都没有工作,过时的,即使它解决大多数人的问题(这似乎对我不起作用)
大部分来自引导片段包从Visual Studio 2017年(扩展)
<!-- Image Slider w/ Captions -->
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-carousel" data-slide-to="0" class="active"></li>
<li data-target="#my-carousel" data-slide-to="1"></li>
<li data-target="#my-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div id="#my-carousel" class="item active">
<img class="img-fluid d-block w-100" alt="First slide" src="http://placehold.it/1200x675&text=First+slide">
<div class="carousel-caption">
<h3>Caption heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div id="#my-carousel" class="item">
<img class="img-fluid d-block w-100" alt="Second slide" src="http://placehold.it/1200x675&text=Second+slide">
<div class="carousel-caption">
<h3>Caption heading 2</h3>
<p>Morbi eget libero quis metus consectetur semper.</p>
</div>
</div>
<div id="#my-carousel" class="item">
<img class="img-fluid d-block w-100" alt="Third slide" src="http://placehold.it/1200x675&text=Third+slide">
<div class="carousel-caption">
<h3>Caption heading 3</h3>
<p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#my-carousel" 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="#my-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="js/animations.js"></script>
JS代码:(复制的代码here)
$(document).ready(function() {
console.log("Main Content finished loading!");
});
$("#myCarousel .slider-pager a").click(function (e) {
var index = $(this).index();
slider.carousel(index);
e.preventDefault();
});
我也在其他网站尝试了其他的代码,我似乎无法找到答案或我的问题的解决方案。
都尝试你的代码(W/O JS),仍然没有运气:https://i.imgur.com/MbAGzaj.jpg –
按 “运行的代码片断” 看它正在工作。 很难从图像中发现产生错误的原因 - 请提供链接到实时网站,代码操场等。 –
我明白了,它现在起作用了。产生错误的是当我用carouselIndicator替换carouselExampleIndicator(*)时。 –