Bootstrap slideshow (carousel) indicators not working
Question
I have just coded bootstrap carousel but I'm not able to get the indicators (left, right) for scrolling.
Please find the snippet below
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width; initital-scale=1"> <title> Bootstrap Example</title> <!-- Bootstrap References --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="index.js"></script> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-12"> <div id="mySlider" class="carousel slide" data-ride="carousel"> <!-- .nav's buttons on the bottom --> <ol class="carousel-indicators"> <li data-target="#mySlider" data-slide-to="0" class="active"></li> <li data-target="#mySlider" data-slide-to="1"></li> </ol> <!-- Image slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <figure> <img width=500px height=500px src="http://www.hdwallpapersfreedownload.com/uploads/large/fruits/orange-fruit-with-leaf-hd.jpg" alt="Slide1"> <!--<div class="carousel-caption">This is a fruit leaf</div>--> </figure> <figcaption class="carousel-caption">This is a fruit leaf</figcaption> </div> <div class="item"> <figure> <img width=500px height=500px src="http://www.greatgrubclub.com/domains/greatgrubclub.com/local/media/images/medium/4_1_1_kiwi.jpg" alt="Slide2"> <!--<div class="carousel-caption">This is a fruit leaf</div>--> </figure> <figcaption class="carousel-caption">KIWIf</figcaption> </div> </div> <!-- END: Image slides --> <!-- Slide buttons (left,right) buttons --> <a class="left coursel-control" href="#mySlider" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right coursel-control" href="#mySlider" role="button"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- END: Slider --> </div> </div> </div> </body> </html>
I get the scrolling and everything but the right "Indicator" to scroll does not appear
What am I doing wrong?
Thanks
1 answers
solution1
2 ACCPTED 2017-02-14 21:53:02
Added the default glyphicons and you're missing the data-slide attribute on the right/next arrow.
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width; initital-scale=1"> <title> Bootstrap Example</title> <!-- Bootstrap References --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="index.js"></script> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-12"> <div id="mySlider" class="carousel slide" data-ride="carousel"> <!-- .nav's buttons on the bottom --> <ol class="carousel-indicators"> <li data-target="#mySlider" data-slide-to="0" class="active"></li> <li data-target="#mySlider" data-slide-to="1"></li> </ol> <!-- Image slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <figure> <img width=500px height=500px src="http://www.hdwallpapersfreedownload.com/uploads/large/fruits/orange-fruit-with-leaf-hd.jpg" alt="Slide1"> <!--<div class="carousel-caption">This is a fruit leaf</div>--> </figure> <figcaption class="carousel-caption">This is a fruit leaf</figcaption> </div> <div class="item"> <figure> <img width=500px height=500px src="http://www.greatgrubclub.com/domains/greatgrubclub.com/local/media/images/medium/4_1_1_kiwi.jpg" alt="Slide2"> <!--<div class="carousel-caption">This is a fruit leaf</div>--> </figure> <figcaption class="carousel-caption">KIWIf</figcaption> </div> </div><!-- END: Image slides --> <!-- Slide buttons (left,right) buttons --> <a class="left carousel-control" href="#mySlider" 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="#mySlider" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- END: Slider --> </div> </div> </div> </body>
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.
Related Question
Bootstrap 4 carousel indicators are not working
Bootstrap Carousel Indicators Not Working
Bootstrap Carousel Indicators not working properly
Why my Carousel Indicators in Bootstrap are not working?
Bootstrap Carousel not displaying indicators and list not working
Bootstrap carousel indicators and controls not working from php
Bootstrap carousel indicators
Styling bootstrap carousel indicators
Bootstrap carousel indicators not clickable
Bootstrap 4 Carousel Indicators are not appearing
Related Tags