I have a carousel with four slides.
The slider controls and the indicators are shown but not working.
Can't navigate to next or previous photo of the slider.
Can't find the mistake.
Any ideas??
This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Gallery</li>
<li>Service</li>
<li>Contact</li>
<li></li>
</ul>
</div><!--navbar-->
<div id="the-slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#the-slider" data-slide-to="0" class="active"></li>
<li data-target="#the-slider" data-slide-to="1"></li>
<li data-target="#the-slider" data-slide-to="2"></li>
<li data-target="#the-slider" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="pic/g800x400.gif" alt="pic1">
</div> <!--item-1 -->
<div class="item">
<img src="pic/pic1.jpg" alt="pic2">
</div> <!--item-2 -->
<div class="item">
<img src="pic/pic2.jpg" alt="pic3">
</div> <!--item-3 -->
<div class="item">
<img src="pic/pic3.jpg" alt="pic4">
</div> <!--item-4 -->
</div> <!-- carousel-inner -->
<!--controls-->
<a class="left carousel-control" href="#the-slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#the-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!--the-slider -->
</body>
</html>
Add these two scripts in your head section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
include jquery
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
include bootstrapmin.js
Hi George Kougentakos-jones.This may help you......
<!DOCTYPE html>
<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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Gallery</li>
<li>Service</li>
<li>Contact</li>
<li></li>
</ul>
</div><!--navbar-->
<div id="the-slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#the-slider" data-slide-to="0" class="active"></li>
<li data-target="#the-slider" data-slide-to="1"></li>
<li data-target="#the-slider" data-slide-to="2"></li>
<li data-target="#the-slider" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="pic/g800x400.gif" alt="pic1" style="width:100%">
</div> <!--item-1 -->
<div class="item">
<img src="pic/pic1.jpg" alt="pic2" style="width:100%">
</div> <!--item-2 -->
<div class="item">
<img src="pic/pic2.jpg" alt="pic3" style="width:100%">
</div> <!--item-3 -->
<div class="item">
<img src="pic/pic3.jpg" alt="pic4" style="width:100%">
</div> <!--item-4 -->
</div> <!-- carousel-inner -->
<!--controls-->
<a class="left carousel-control" href="#the-slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#the-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div> <!--the-slider -->
</body>
</html>`
Related
I tried to remove the extra white space left and right of carousel using different answers I found, but I wasn't success. I am using the example from here: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
How to remove that space and leave only the carousel?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Carousel</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.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="begin.png" alt="" style="width:100%;">
</div>
<div class="item">
<img src="first.png" alt="" style="width:100%;">
</div>
<div class="item">
<img src="second.png" alt="" style="width:100%;">
</div>
<div class="item">
<img src="third.png" alt="" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Remove this Container <div class="container">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Carousel</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.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-interval="false" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="begin.png" alt="" style="width:100%;">
</div>
<div class="item">
<img src="first.png" alt="" style="width:100%;">
</div>
<div class="item">
<img src="second.png" alt="" style="width:100%;">
</div>
<div class="item">
<img src="third.png" alt="" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
I have looked at a lot of stack overflow posts on this topic and i didn't find any info on the behavior i'm seeing here. My images are 300 x 300 and are appearing stacked on top of each other as if the carousel is not working at all. There are obviously no sliders appearing either. Here is my code :
<!-- Images -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ul>
<!-- Slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="Los Angeles" height="300px" width="300px">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" height="300px" width="300px">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/newyork.jpg" alt="New york" height="300px" width="300px">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
Note that the rest of bootstrap is working beautifully. Here are the imports i'm using :
<script type="text/javascript" th:src="#{/webjars/jquery/3.3.1-1/jquery.min.js}"></script>
<script type="text/javascript" th:src="#{/webjars/bootstrap/4.2.1/js/bootstrap.min.js}"></script>
<link rel="stylesheet" th:href="#{/webjars/bootstrap/4.2.1/css/bootstrap.min.css}"/>
The code that you are using is identical to this w3schools sample, which is for bootstrap 3!
<!DOCTYPE html>
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://picsum.photos/200/300?image=0" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="https://picsum.photos/200/300?image=1" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="https://picsum.photos/200/300?image=0" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
I think you need this w3schools tutorial for bootstrap 4.
I have made a carousel and it doesn't work automatically nor does it respond to a manual control.
The arrows on the side won't respond.
I made the carousel from W3Schools and I was certain that it will work, but it doesnt.
You can find my code on Codepen
My code:
<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">
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://www.derekprincearmenia.com/wp-content/uploads/2014/09/56699-nature-beauty-600x400.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="http://globalmedicalco.com/photos/globalmedicalco/18/85311.png" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="http://stipsy.com/wp-content/uploads/2013/08/Hamilton-Pool-Nature-Preserve-9-600x400.jpg" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
This worked for me. Hope it helps. What you needed to add into you <head> tags was the following scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://www.derekprincearmenia.com/wp-content/uploads/2014/09/56699-nature-beauty-600x400.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="http://globalmedicalco.com/photos/globalmedicalco/18/85311.png" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="http://stipsy.com/wp-content/uploads/2013/08/Hamilton-Pool-Nature-Preserve-9-600x400.jpg" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Add this inbetween your <head></head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
These are main scripts you would need, the one for bootstrap and jquery
i have tried everything, including this code which is straight from ww3 itself, with added cdn.
it worked on bootstrap 4 beta but everything else on my site works on an earlier version and im new and superstitious about run time; don't wish to include them both if i dont have to
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="myCarousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://media.galaxant.com/000/462/866/desktop-1462221325.png" alt="spacious tent">
</div>
<div class="item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/98/4f/f8/984ff8bea911ffb5977635185d79396e.jpg" alt="lots of head room">
</div>
<div class="item">
<img src="http://kitchenfunwithmy3sons.com/wp-content/uploads/2016/04/the-best-camping-ideas-hacks-gear-tips-and-tricks-37.jpg" alt="no bull crap">
</div>
</div>
<!--End listbox-->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<script
src="http://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</div>
</body>
Your JQuery version has some issues. Try using some older version. For demo purpose, I replaced it with vers.2.1 and it's working.
And you do not need to repeat your CSS linking
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>
<div id="myCarousel" class="carousel slide" data-ride="myCarousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://media.galaxant.com/000/462/866/desktop-1462221325.png" alt="spacious tent">
</div>
<div class="item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/98/4f/f8/984ff8bea911ffb5977635185d79396e.jpg" alt="lots of head room">
</div>
<div class="item">
<img src="http://kitchenfunwithmy3sons.com/wp-content/uploads/2016/04/the-best-camping-ideas-hacks-gear-tips-and-tricks-37.jpg" alt="no bull crap">
</div>
</div>
<!--End listbox-->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!-- Latest compiled and minified JavaScript -->
</div>
It seems that everything is ok, but the carousel controls are not working. When I press on the circle, nothing changes.
<hmtl>
<style>
.ali{
width:170px;
text-align:center;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<body>
<div class="container" id="main">
<div class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="ali">Page 1</li>
<li class="ali">Page 2</li>
<li class="ali">Page 3</li>
<li class="ali">Page 4</li>
<li class="ali">Page 5</li>
<li class="ali">Page 6</li>
</ul>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#MyCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://newartcolorz.com/images/lens-wallpaper/kartandtinki1_lens-wallpaper_03.jpg">
</div>
<div class="item">
<img src="http://images.tutorvista.com/cms/images/95/concave-lens.png" alt="Lens">
</div>
</div>
<!-- start of carousel controls that are not working -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- end of carousel inner -->
</div> <!-- end of carousel -->
<footer>
</footer>
</body>
I've looked up from the bootstrap documentation page and the carousel controls are identical.
You have mistake on the carousel, you forgot the H letter on Glyphicon
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
Next
like that
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$( document ).ready(function(){
$('#mycarousel').carousel();
});</script>
<style>
.ali{
width:170px;
text-align:center;
}
</style>
<div class="container" id="main">
<div class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="ali">Page 1</li>
<li class="ali">Page 2</li>
<li class="ali">Page 3</li>
<li class="ali">Page 4</li>
<li class="ali">Page 5</li>
<li class="ali">Page 6</li>
</ul>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placekitten.com/300/500">
</div>
<div class="item">
<img src="http://placekitten.com/300/500" alt="Lens">
</div>
</div>
<!-- start of carousel controls that are not working -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- end of carousel inner -->
</div> <!-- end of carousel -->
<footer>
</footer>
</body>
</html>