bootstrap carousel indicators does not change photo when clicked ()
Question
I'm trying to code bootstrap carousel, photos there are changing automatically like they should, but the indicators, the dots at the bottom of carousel not changing the photo when I'm trying to click one. Can anyone help? I tried to look everywhere.
jQuery is included ABOVE the bootstrap.js , but if it was this, carousel would not change the photo, right? Photos are changing but indicators not working, thats weird.
<head>
<meta charset="utf-8">
<title>Ag</title>
<meta name="vievport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" type="text/css" href="css/own.css">
</head>
<body>
<div id="sliderSyrenka" class="carousel slide" data-ride="carousel">
<!-- INDICATORS-->
<ol class="carousel-indicators">
<li data-target="#sliderSyrenka" data-slide-to:"0" class="active"></li>
<li data-target="#sliderSyrenka" data-slide-to:"1"></li>
<li data-target="#sliderSyrenka" data-slide-to:"2"></li>
<li data-target="#sliderSyrenka" data-slide-to:"3"></li>
</ol>
<!-- WRAPPER FOR SLIDES-->
<div class="carousel-inner" >
<div class="item active">
<img src="img/slider/slide0.jpg" alt="" >
</div>
<div class="item">
<img src="img/slider/slide1.jpg" alt="" >
</div>
<div class="item">
<img src="img/slider/slide2.jpg" alt="" >
</div>
<div class="item">
<img src="img/slider/slide3.jpg" alt="" >
</div>
</div>
</div>
</body>
1 answers
solution1
1 ACCPTED 2016-04-03 23:53:08
You have a syntax error in : data-slide-to:
Just replace : with = and carousel-indicators will work perfectly :)
corrected carousel-indicators :
<!-- INDICATORS-->
<ol class="carousel-indicators">
<li data-target="#sliderSyrenka" data-slide-to="0" class="active"></li>
<li data-target="#sliderSyrenka" data-slide-to="1"></li>
<li data-target="#sliderSyrenka" data-slide-to="2"></li>
<li data-target="#sliderSyrenka" data-slide-to="3"></li>
</ol>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.