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>
Related
I have a problem that when I copied the codes from w3schools websites (https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel2&stacked=h)
and I use it for Google sites as a tool , but when I but the codes the images don't showed up as you see in the Pic below
please see my problem.
As you can see the below code, they use for img src "la.jpg" that's why you can't see the picture. If you replace it with "https://www.w3schools.com/bootstrap/{image_name}.jpg" for img src code, I think you can see the pics.
<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="la.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<img src="ny.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</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>
You can see the edited version below. Please check the differences.
<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</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 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 this carousel on my site:
<div id="carousel-container" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active"><img class="d-block w-100" src="comput.jpg" alt="Slide 1"/></div>
<div class="carousel-item"><img class="d-block w-100" src="unity.jpg" alt="Slide 2"/></div>
<div class="carousel-item"><img class="d-block w-100" src="my.jpg" alt="Slide 3"/></div>
</div>
<a class="carousel-control-prev" href="#carousel-container" data-slide="prev" role="button">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-container" data-slide="next" role="button">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
The carousel controls aren't working, I click on it and nothing happens.
(Yes, I've already looked up to similar questions but the those solutions didn't work to me.)
Your code will run after you use these js files.(using "bootstrap.js" or"bootstrap.min.js"). You can look the demo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>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.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>Ercan Er</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://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg" alt="Example 1" style="width:100%;">
</div>
<div class="item">
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg" alt="Example 2" style="width:100%;">
</div>
<div class="item">
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg" alt="Example 3" 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'm Attaching the code for JSP file
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>HOME PAGE</title>
<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>
<base href="resources\" target="_blank">
<style type="text/css">
section{
background-color: #f2f2f2;
}
</style>
</head>
<body>
<section>
<!-- Carousel code 1-->
<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 class="img-responsive center-block" src="sale.jpg" alt="SALE" id="img">
</div>
<div class="item">
<img class="img-responsive center-block" src="womensale.jpg" alt="WOMEN CLOTHING" id="img">
</div>
<div class="item">
<img class="img-responsive center-block" src="Mens.jpg" alt="MENS CLOTHING" id="img">
</div>
<div class="item">
<img class="img-responsive center-block" src="kids.jpg" alt="KIDS CLOTHING" id="img">
</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>
<br><br><br><br><br>
</section>
<section>
<!-- Carousel code 2-->
<div id="myCarousel2" 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 class="img-responsive center-block" src="men1.jpg" alt="Mens" id="img">
</div>
<div class="item">
<img class="img-responsive center-block" src="men2.jpg" alt="Mens" id="img">
</div>
<div class="item">
<img class="img-responsive center-block" src="men3.jpg" alt="Mens" id="img">
</div>
<div class="item">
<img class="img-responsive center-block" src="men4.jpg" alt="Mens" id="img">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel2" 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="#myCarousel2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<section>
<!-- Carousel code 3-->
<div id="myCarousel3" 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 class="img-responsive center-block" src="women.jpg" alt="Womens" id="img">
</div>
<div class="item">
<img class="img-responsive center-block" src="women2.jpg" alt="Womens" id="img">
</div>
<div class="item">
<img class="img-responsive center-block" src="women3.jpg" alt="Womens" id="img">
</div>
<div class="item">
<img class="img-responsive center-block" src="women4.jpg" alt="Womens" id="img">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel3" 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="#myCarousel3" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
</body>
</html>
Here there are multiple carousel codes. Now I want to have carousel codes such that there size is same as background size.Can any one help me to find the above problem.As I'm running in the browser it is making uncomfortable the flow of html i.e, if there are three carousel then it should have three sections which shows accordingly to background size.
<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>