Bootstrap Carousel Indicators Not Working
Question
When clicking on the indicator circles in this carousel, rather than loading the appropriate image, nothing happens. The carousel does cycle through each image; there is simply no way to control it with the indicators. I've read a previously posted thread about this issue, and the solutions proposed there have not worked for me. Would anybody mind taking a quick look at my html to see if I'm missing something painfully obvious? Thank you in advance for taking the time!
<head> <title>Freshwater Ranch</title> <link rel="shortcut icon" href="logo.jpg" type="image/ico"> <meta charset = "UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link href='https://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="freshwater_styles.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="jquery-1.12.0.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <div class="photo_body" class="carousel slide" data-ride="carousel" id="rotating_photos"> <ol class="carousel-indicators"> <li data-target="#rotating_photos" data-slide-to="0" class="active"></li> <li data-target="#rotating_photos" data-slide-to="1"></li> <li data-target="#rotating_photos" data-slide-to="2"></li> <li data-target="#rotating_photos" data-slide-to="3"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="ranchhouseview1.jpg" alt="View of Ranch"> </div> <div class="item"> <img src="view4.jpg" alt="View of Ranch"> </div> <div class="item"> <img src="horse.jpg" alt="Horse Photo"> </div> <div class="item"> <img src="view5.jpg" alt="View of Ranch"> </div> </div><!--carousel inner--> </div><!--carousel outer-->
2 answers
solution1
2 ACCPTED 2016-02-20 01:18:48
Its not working because you stated the class attribute twice on the first line of your carousel:
<div class="photo_body" class="carousel slide" data-ride="carousel" id="rotating_photos">
As you can see the class attribute is in this line twice you should only state it once and put he class of photo_body after carousel and slide. Here is how it should look.
<div class="carousel slide photo_body" data-ride="carousel" id="rotating_photos">
<ol class="carousel-indicators">
<li data-target="#rotating_photos" data-slide-to="0" class="active"></li>
<li data-target="#rotating_photos" data-slide-to="1"></li>
<li data-target="#rotating_photos" data-slide-to="2"></li>
<li data-target="#rotating_photos" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="ranchhouseview1.jpg" alt="View of Ranch">
</div>
<div class="item">
<img src="view4.jpg" alt="View of Ranch">
</div>
<div class="item">
<img src="horse.jpg" alt="Horse Photo">
</div>
<div class="item">
<img src="view5.jpg" alt="View of Ranch">
</div>
</div><!--carousel inner-->
</div><!--carousel outer-->
Also I'm not sure if this has anything to do with your carousel not working but you have 3 different versions of jquery loading. I'm pretty sure this is not necessary. I would just load the newest that you have there which is
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
and delete tags below :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="jquery-1.12.0.min.js"></script>
from your head unless you have some plugin that requires an earlier version of jquery then you can load the earlier versions but you could encounter some conflicts if you load more than one version of jquery.
solution2
0 2016-02-19 23:58:20
You are missing role="listbox" . I think this is the issue.
Change to:
<div class="carousel-inner" role="listbox">
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.