Twitter Bootstrap carousel controls aren't working - html

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>

Related

How to remove the white space left and right of carousel

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>

bootstrap 4 carousel ignored, images stacked on top of eachother

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.

CSS slider with link to pop up video

I'm trying to create a link to a pop up video in my css slider. I cant get the link to work. It seems like a simple task but its just not acting as a link. Any advice would be really appreciated
Here is my code
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div style="width:100%; class="container-fluid">
<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>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<ul class="carousel-inner">
<li class="item active">
<a href="https://www.youtube.com/embed/yiif8r_U120" target="blank"
allowfullscreen controls>
<img src="images/video_slider_button.jpg" alt="Video" style="width:100%;">
</a>
</li>
<li class="item">
<img src="images/test_slider.jpg" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="images/test_slider.jpg" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="images/toast_slider.jpg" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="images/test_slider.jpg" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="images/test_slider.jpg" alt="Test" style="width:100%;">
</li>
</ul>
<!-- 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>

Your problem seems to be an issue with an un-closed tag, here's some working code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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">
<!-- Optional theme -->
<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 style="width:100%;" class="container-fluid">
<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>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<ul class="carousel-inner">
<li class="item active">
<a href="https://www.youtube.com/embed/yiif8r_U120" target="blank"
allowfullscreen controls>
<img src="http://via.placeholder.com/350x150?text=Video Slide" alt="Video" style="width:100%;">
</a>
</li>
<li class="item">
<img src="http://via.placeholder.com/350x150?text=Slide1" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="http://via.placeholder.com/350x150?text=Slide2" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="http://via.placeholder.com/350x150?text=Slide3" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="http://via.placeholder.com/350x150?text=Slide4" alt="Test" style="width:100%;">
</li>
<li class="item">
<img src="http://via.placeholder.com/350x150?text=Slide5" alt="Test" style="width:100%;">
</li>
</ul>
<!-- 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>
The issue I saw was that you never closed the quote for your div container, eg:
<div style="width:100%; class="container-fluid">
Should have been:
<div style="width:100%;" class="container-fluid">

Sign up bootstrap carousel indicators does not change photo when clicked

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>`

My HTML carousel isn't working

My HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Figueiredo</title>
<link rel="stylesheet" href="css/other.css" type="text/css"/>
</head>
<body>
<div id="HEADER" class="header-cont">
<ul>
<li><a href="https://www.google.pt/webhp?sourceid=chrome-instant&rlz=1C1ASUC_enPT607PT607&ion=1&espv=2&ie=UTF-8#q=filmes"</a> Filmes</li>
<li><a href="https://www.google.pt/webhp?sourceid=chrome-instant&rlz=1C1ASUC_enPT607PT607&ion=1&espv=2&ie=UTF-8#q=filmes"</a> Música</li>
<li><a href="https://www.google.pt/webhp?sourceid=chrome-instant&rlz=1C1ASUC_enPT607PT607&ion=1&espv=2&ie=UTF-8#q=filmes"</a> Portefólio</li>
<li><a href="https://www.google.pt/webhp?sourceid=chrome-instant&rlz=1C1ASUC_enPT607PT607&ion=1&espv=2&ie=UTF-8#q=filmes"</a> Contactos</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>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://s-media-cache-ak0.pinimg.com/736x/79/46/75/7946751143452f74384ed52d917af00e.jpg">
</div>
<div class="item">
<img src="http://blog.signalnoise.com/wp-content/uploads/2014/10/twitter_drive_bbc.jpg">
</div>
<div class="item">
<img src="http://orig07.deviantart.net/b8b1/f/2009/202/8/9/the_matrix_poster_art_by_themadmind.jpg">
</div>
</div>
<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>
</body>
</html>
I copied the code from w3schools and it doesn't work. I want to create a carousel with the three images linked in the code. If possible I would also like to know how to put the carousel in vertical.
What I'm getting:

Try including the links to the JS in the head section of the html.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>