Bootstrap旋转木马滑块不工作 [英] Bootstrap Carousel Slider not working
问题描述
我从Bootstrap获得了滑块： http：// getbootstrap.com/javascript/#carousel
I have been developing a theme with Bootstrap for my project. As I see there is something wrong with Carousel slider. I have read as much as questions and answers about Carousel here but there is no progress about my problem. I can't copy-paste the code that is seen not good when I paste it here between code tag.
问题是当我点击滑块上的下一页时，链接被看到
I got the slider from Bootstrap: http://getbootstrap.com/javascript/#carousel
http://example.com/#carousel-example-generic
http://example.com/#carousel-example-generic 之后没有任何反应。
推荐答案
请检查是否已加载所有站点： p>
Please check if have all depency in site loaded:下面是一个工作示例，将其复制
Here is an Working Example, copy it- < li data-target =＃carousel-example-genericdata-slide-to =0class =active>< / li>
< / ol>
< div class =carousel-innerrole =listbox>
< div class =item active>< img alt =第一张幻灯片[900x500]
data-src =holder.js / 900x500 / auto /＃777：＃555 / text：First slide
src =http://i.imgur.com/CK3d6nV.jpgdata-holder-rendered =true>< / div>
< div class =item>< img alt =第二张幻灯片[900x500]
data-src =holder.js / 900x500 / auto /＃666：＃444 / text ：第二张幻灯片
src =http://i.imgur.com/SlHr4zn.jpgdata-holder-rendered =true>
< / div>
< div class =item>
< img alt =第三张幻灯片[900x500]data-src =holder.js / 900x500 / auto /＃555：＃333 / text：第三张幻灯片
src =http：/ /i.imgur.com/OAMaVRo.jpgdata-holder-rendered =true>< / div>
< / div>
< a href =＃carousel-example-genericclass =left carousel-controlrole =buttondata-slide =prev> < span
class =glyphicon glyphicon-chevron-leftaria-hidden =true>< / span> < span
class =sr-only>上一页< / span> < / A> < a href =＃carousel-example-generic
class =right carousel-controlrole =button
data-slide =next> < span
class =glyphicon glyphicon-chevron-rightaria-hidden =true>< / span> < span
class =sr-only>下一步< / span> < / A>< / DIV>
< / div>
< / body>
< / html>
http://codepen.io/anon/pen/pNRrPm
<html lang="en">
<head>
<title>Bootstrap 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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
height: 500px;
margin: auto;
}
</style>
</head>
<body>
<div class="bs-example" data-example-id="simple-carousel">
<div class="carousel slide" id="carousel-example-generic" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img alt="First slide [900x500]"
data-src="holder.js/900x500/auto/#777:#555/text:First slide"
src="http://i.imgur.com/CK3d6nV.jpg" data-holder-rendered="true"></div>
<div class="item"><img alt="Second slide [900x500]"
data-src="holder.js/900x500/auto/#666:#444/text:Second slide"
src="http://i.imgur.com/SlHr4zn.jpg" data-holder-rendered="true">
</div>
<div class="item">
<img alt="Third slide [900x500]" data-src="holder.js/900x500/auto/#555:#333/text:Third slide"
src="http://i.imgur.com/OAMaVRo.jpg" data-holder-rendered="true"></div>
</div>
<a href="#carousel-example-generic" class="left carousel-control" role="button" data-slide="prev"> <span
class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span
class="sr-only">Previous</span> </a> <a href="#carousel-example-generic"
class="right carousel-control" role="button"
data-slide="next"> <span
class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span
class="sr-only">Next</span> </a></div>
</div>
</body>
</html>
这篇关于Bootstrap旋转木马滑块不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
