I have been developing a theme with Bootstrap for my project. As I see there is something wrong with Carousel slider. I have read as much as questions and answers about Carousel here but there is no progress about my problem. I can't copy-paste the code that is seen not good when I paste it here between code tag.
I got the slider from Bootstrap: http://getbootstrap.com/javascript/#carousel
The problem is when I click next page on slider, the link is seen
http://example.com/#carousel-example-generic
<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>
and nothing happens after that. And also the first slide is not moving to the second one.
Please check if have all depency in site loaded:
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Here is an Working Example, copy it
http://codepen.io/anon/pen/pNRrPm
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
height: 500px;
margin: auto;
}
</style>
</head>
<body>
<div class="bs-example" data-example-id="simple-carousel">
<div class="carousel slide" id="carousel-example-generic" 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" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img alt="First slide [900x500]"
data-src="holder.js/900x500/auto/#777:#555/text:First slide"
src="http://i.imgur.com/CK3d6nV.jpg" data-holder-rendered="true"></div>
<div class="item"><img alt="Second slide [900x500]"
data-src="holder.js/900x500/auto/#666:#444/text:Second slide"
src="http://i.imgur.com/SlHr4zn.jpg" data-holder-rendered="true">
</div>
<div class="item">
<img alt="Third slide [900x500]" data-src="holder.js/900x500/auto/#555:#333/text:Third slide"
src="http://i.imgur.com/OAMaVRo.jpg" data-holder-rendered="true"></div>
</div>
<a href="#carousel-example-generic" class="left carousel-control" role="button" data-slide="prev"> <span
class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span
class="sr-only">Previous</span> </a> <a href="#carousel-example-generic"
class="right carousel-control" role="button"
data-slide="next"> <span
class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span
class="sr-only">Next</span> </a></div>
</div>
</body>
</html>
Related
I'm trying to make a carousel inside a carousel so I can dynamically load larger sections and have everything neatly organized, I am trying to hardcode a carousel inside a carousel for the time being however I am having issues with the third slide not displaying and I cant figure out why does anyone have any suggestions.
<!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/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 25%;
height: 25%;
}
</style>
</head>
<body>
<div id="demo1" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo1" data-slide-to="0" class="active"></li>
<li data-target="#demo1" data-slide-to="1"></li>
<li data-target="#demo1" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner text-center" style="background-color: #3a3b45">
<div class="carousel-item active">
<img src="img/logo.png" alt="Los Angeles">
</div>
<div class="carousel-item">
<!--Carousel 2-->
<!--<img src="img/logo.png" alt="Los Angeles">-->
<div id="demo2" class="carousel slide" data-ride="carousel" data-interval="false">
<ul class="carousel-indicators mb-4">
<li data-target="#demo2" data-slide-to="0" class="active"></li>
<li data-target="#demo2" data-slide-to="1"></li>
<li data-target="#demo2" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/logo.png" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="img/logo.png" alt="Chicago">
</div>
<div class="carousel-item">
<img src="img/logo.png" alt="New York">
</div>
</div>
</div>
<!--Carousel 2 END-->
</div>
<div class="carousel-item">
<img src="img/logo.png" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo1" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo1" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
Although it's mentioned in the documentation of bootstrap 4 that-
nested carousels are not supported
But, I'm trying, I wanted to do this a long time ago & now seeing your question made me re-try, I'll let you know here if I make it, till then you can start where I stopped today- (visit the link in the comment)
Best of luck.
This is my code. The carousel works but I need it to be mobile responsive and the images fit according to the carousel size no matter the size of the image. Your help is gladly appreciated.
So first how to make the carousel mobile responsive. Second how to make the images fit the carousel container no matter what the image size is.
<?php
session_start();
?>
<!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>
<style>
.item img {
width:100%
}
.carousel-inner{
background-size: cover;
}
</style>
<div class="container" style=" width:100%; height: 800px;">
<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" style=" width:100%; height: 800px !important;">
<div class="item active">
<img src="1.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="2.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="3.jpg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="4.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>
You must add img-responsive class to your image to make responsive its for bootstrap 3 and bootstrap img-fluid is the class name.
<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.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower" width="460" height="345">
</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>
</div>
</body>
I'm very new to HTML and coding but I'm trying to out a basic bootstrap carousel on my website. When I do it moves everything around and the next/previous buttons are also not where they are supposed to be. Any help would be appreciated
Override the below bootstrap classes in your <style>
.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {margin-right: 200px}
.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {margin-left: 200px}
.carousel-control {width :0%;}
The first two classes will push the next and prev arrows inline. The third class will remove the excess white space of the carousel.
Hope this helps.
How do I remove the white space above the carousel? I have tried everything I can think of and it isn't working.
I want to have a colored background with transparent / white backgrounded images. So the carousel has to have the background color of white, but when I add this it adds that white bar to the top of the carousel.
<!DOCTYPE html>
<html lang="en">
<head>
<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.4/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 style="background-color: black;">
<div style="background-color: white; padding: 0px;" 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" role="listbox">
<div class="item active">
<img src="https://pixabay.com/static/uploads/photo/2014/06/03/19/38/road-sign-361514_960_720.png">
</div>
<div class="item">
<img src="https://pixabay.com/static/uploads/photo/2014/06/03/19/38/road-sign-361514_960_720.png">
</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>
</div>
</body>
</html>
Remove the <br> from here:
<div style="background-color: white; padding: 0px;" class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
<script src="js/vendor/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="container" style="margin-top:20px;">
<div class="col-md-4">
<ul class="nav nav-pills nav-stacked">
<li class="active">
Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
</div>
<div class="col-md-8">
<div id="mycar" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#mycar" data-slide-to="0" class="active"></li>
<li data-target="#mycar" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item-active">
<img src="slider/demo-slider-1.jpg">
</div>
<div class="item">
<img src="slider/image-slider-2.jpg">
</div>
</div>
<a class="left carousel-control" href="#mycar" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#mycar" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</body>
</html>
This is my full code what problem is occuring is that carousel slide is not properly functioning. When page is loaded first time the image slider works means when we click slider arrow (either of them weather left or right) it works and image does change. But after first attempt it does not change or slide the image. other problem is that slide indicator links are also not working.
Seems like something is conflicting. Build the "mycar" Div as following
<div id="mycar" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#mycar" data-slide-to="0" class="active"></li>
<li data-target="#mycar" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="slider/demo-slider-1.jpg">
</div>
<div class="item">
<img src="slider/demo-slider-2.jpg">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycar" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control"
href="#mycar" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
</span></a>
</div>
Hope this helps .. if it does help me earn reputation .. or if you seek more help please let me know.