I’m trying to implement the bootstrap 3 carousel into my site however the slide buttons for left and right are not working and so are the slide dots. Can anyone spot a problem in my code?
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" scr="js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<title>Test page! </title>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/deepcleaning1.jpg" alt="deepcleaning">
</div>
<div class="item">
<img src="img/deepcleaning2.jpg" alt="deepcleaning2">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
2
Answers
It turned that for some reason the jquery link was not working... All I did was download the jquery file and linked to it instead of using the API. Works like a charm.
Don't know why the link didn't work for me though...
Sounds like a similar issue to: Bootstrap Carousel does not work
The answer there recommends checking for javascript errors, particularly the link to jquery. It seems that adding http or https to the URL could fix the issue.
or