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>
Related
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 the following BS4 Carousel code, (made it using this tutorial https://www.youtube.com/watch?v=n8ItscKLf7s&list=PLRtjMdoYXLf47brThg9-nTj8HSq8cQ0ND&index=53), However the code is not working, the first image is displayed but I dont know for what reasons carousel is not controlled and it does'nt go to the next image in any case. What is the possible solution?
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<br />
<div id="carousel-example-generic" class="carousel-slide" data-ride="carousel">
<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>
<li data-target="#carousel-example-generic" data-slide-to="2"> </li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item-active">
<img src="images/1.jpeg" alt="First-Slide">
</div>
<div class="carousel-item">
<img src="images/2.jpeg" alt="Second-Slide">
</div>
<div class="carousel-item">
<img src="images/3.jpeg" alt="Third-Slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" 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="icon-next" aria-hidden="true"></span>
<span class="sr-only"> Next </span>
</a>
</div>
</div>
</div>
</div>
Works perfectly
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<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.w3schools.com/bootstrap/ny.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/newyork.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>
Small mistake. class="carousel-item-active" should be class="carousel-item active". It is not a single class. You have combined the active class with carousel-item class. That is the mistake.
<div class="carousel-item-active">
<img src="images/1.jpeg" alt="First-Slide">
</div>
Should changed to
<div class="carousel-item active">
<img src="images/1.jpeg" alt="First-Slide">
</div>
Ok so, I was following this tutorial on YT, and everything is fine so far, except carousel is showing only the active image, and wont switch to others. I checked the code multiple times, everything is on place, but it just won't work. Please answer if you know what's wrong, I'll appreciate it so much! :)
Here is the code:
<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="img/mountains.png">
<div class="carousel-caption">
<h1>Lorem Ipsum</h1>
<br>
<button type="button" class="btn btn-default">Lorem Ipsum</button>
</div>
</div> <!-- Kraj active slajdera -->
<div class="item">
<img src="img/snow.png">
</div>
<div class="item">
<img src="img/red.png">
</div>
</div>
<!-- Strelice Pocetak -->
<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> <!--Kraj slajdera -->
From you example if you have added the bootstrap assest and jquery , and the <div id="myCarousel" class="carousel slide" data-ride="carousel"> every thing should work fine :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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://www.moroccoworldnews.com/wp-content/uploads/2015/09/moroccan-Sahara.jpg">
<div class="carousel-caption">
<h1>Lorem Ipsum</h1>
<br>
<button type="button" class="btn btn-default">Lorem Ipsum</button>
</div>
</div> <!-- Kraj active slajdera -->
<div class="item">
<img src="http://www.dempos.com/wp-content/uploads/2015/07/Home-Company-Dempo-Travels.jpg">
</div>
<div class="item">
<img src="https://www.moroccoworldnews.com/wp-content/uploads/2015/09/moroccan-Sahara.jpg">
</div>
</div>
<!-- Strelice Pocetak -->
<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>
<div class="container">
<div id="myCarousel" class="Carousel slide" data-ride="Carousel" data-interval="1000">
<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">
<div class="item active" alt="Slide 1">
<img class="img-responsive center-block" src="img/water.jpg" alt="Slide 2">
<div class="Carousel-caption">
<h1>Theme1</h1>
</div>
</div>
<div class="item ">
<img class="img-responsive center-block" src="img/ice.jpg">
<div class="Carousel-caption">
<h1>Theme2</h1>
</div>
</div>
</div>
<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>
</div>
enter image description here
my pictures are not overlapping each other why but my code is correct i am using bootstrap examples but what is the reason i dont know this images not coming in one way over each other
Hi its becz of your class check your class name
class="carousel-inner"
but you mentioned
class="Carousel-inner"
i changed here now it ok
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<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" alt="Slide 1">
<img class="img-responsive center-block" src="img_chania.jpg" alt="Slide 2">
<div class="Carousel-caption">
<h1>Theme1</h1>
</div>
</div>
<div class="item ">
<img class="img-responsive center-block" src="img_chania2.jpg">
<div class="Carousel-caption">
<h1>Theme2</h1>
</div>
</div>
</div>
<!-- Left and right controls -->
<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>
<!-- Left and right controls -->
</div>
</div>
</body>
</html>
Currently the left and right controls on my Bootstrap carousel don't work and I'm trying to figure out why. The slides don't change. Any help would be much appreciated.
html code:
<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" role="listbox">
<div class="item active">
<img src="images/anaesthesiaexams/cap1.png" alt="Chania">
</div>
<div class="item">
<img src="images/anaesthesiaexams/cap2.png" alt="Chania">
</div>
<div class="item">
<img src="images/anaesthesiaexams/cap3.png" alt="Flower">
</div>
<div class="item">
<img src="images/anaesthesiaexams/cap4.png.jpg" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<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>
Hey do you have both js and jquery linked?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>