Bootstrap传送带控件不起作用 [英] Bootstrap carousel controls aren't working
本文介绍了Bootstrap传送带控件不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的网站上有这个传送带：
< div id =carousel-containerclass =carousel slide data-ride =carousel>
< div class =carousel-inner>
< div class =carousel-item active>< img class =d-block w-100src =comput.jpgalt =Slide 1/>< / div> ;
< div class =carousel-item>< img class =d-block w-100src =unity.jpgalt =Slide 2/>< / div>
< div class =carousel-item>< img class =d-block w-100src =my.jpgalt =Slide 3/>< / div>
< / div>
< a class =carousel-control-prevhref =＃carousel-containerdata-slide =prevrole =button>
< span class =carousel-control-prev-icon>< / span>
< span class =sr-only>上一个< / span>
< / a>
< a class =carousel-control-nexthref =＃carousel-containerdata-slide =nextrole =button>
< span class =carousel-control-next-icon>< / span>
< span class =sr-only>下一步< / span>
< / a>
< / div>
传送带控制不起作用，我点击它并没有任何反应。
（是的，我已经注意到了类似的问题，但这些解决方案对我不起作用。）
解决方案
您的代码会在您使用这些js文件后运行（使用bootstrap.js或bootstrap.min.js）。你可以看看演示：
<！DOCTYPE html>< html郎= EN >< HEAD> <标题物实施例< /标题> < meta charset =utf-8> < meta name =viewportcontent =width = device-width，initial-scale = 1> < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css> < script src =https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js>< / script> < script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< / script>< / head>< body>< div class = 容器 > < h2> Ercan Er< / h2> < div id =myCarouselclass =carousel slidedata-ride =carousel> <！ - 指标 - > < ol class =carousel-indicators> < li data-target =＃myCarouseldata-slide-to =0class =active>< / li> < li data-target =＃myCarouseldata-slide-to =1>< / li> < li data-target =＃myCarouseldata-slide-to =2>< / li> < /醇> <！ - 幻灯片包装 - > < div class =carousel-inner> < div class =item active> < img src =https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpgalt =示例1style =width：100％;> < / DIV> < div class =item> < img src =https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpgalt =例2style =width：100％;> < / DIV> < div class =item> < img src =https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpgalt =例3style =width：100％;> < / DIV> < / DIV> <！ - 左右控件 - > < a class =left carousel-controlhref =＃myCarouseldata-slide =prev> < span class =glyphicon glyphicon-chevron-left>< / span> < span class =sr-only>上一页< / span> < / A> < a class =right carousel-controlhref =＃myCarouseldata-slide =next> < span class =glyphicon glyphicon-chevron-right>< / span> < span class =sr-only>下一步< / span> < / A> < / div>< / div>< / body>< / html>
I have this carousel on my site:
<div id="carousel-container" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active"><img class="d-block w-100" src="comput.jpg" alt="Slide 1"/></div>
<div class="carousel-item"><img class="d-block w-100" src="unity.jpg" alt="Slide 2"/></div>
<div class="carousel-item"><img class="d-block w-100" src="my.jpg" alt="Slide 3"/></div>
</div>
<a class="carousel-control-prev" href="#carousel-container" data-slide="prev" role="button">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-container" data-slide="next" role="button">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
The carousel controls aren't working, I click on it and nothing happens. (Yes, I've already looked up to similar questions but the those solutions didn't work to me.)
解决方案
Your code will run after you use these js files.(using "bootstrap.js" or"bootstrap.min.js"). You can look the demo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Ercan Er</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg" alt="Example 1" style="width:100%;">
</div>
<div class="item">
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg" alt="Example 2" style="width:100%;">
</div>
<div class="item">
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg" alt="Example 3" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
这篇关于Bootstrap传送带控件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
