I have been trying to create responsive carousel in bootstrap but images with lower width than carousel's are moving to the left.
Here is the code:
.tales {
width: 100%;
}
.carousel-inner{
width:100%;
max-height: 400x !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- indicators -->
<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>
<!-- inner -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/1200x600/2c3e50/000" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x1200/d35400/000" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x600/c0392b/000" alt="">
</div>
</div>
<!-- controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
It is better to look at when snippet gets expanded.
It is taking way longer than it should..
set display:inline-blockin img and set text-align:center in .item
check snippet below-
.tales {
width: 100%;
}
.carousel-inner{
width:100%;
max-height: 400x !important;
}
.item{
text-align:center;
}
.carousel-inner img{
display:inline-block !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- indicators -->
<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>
<!-- inner -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/1200x600/2c3e50/000" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x1200/d35400/000" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x600/c0392b/000" alt="">
</div>
</div>
<!-- controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
You can given margin: 0 auto; for img tag.
.carousel-inner>.item>a>img, .carousel-inner>.item>img {
margin: 0 auto;
}
Try this
.carousel-inner>.item.active, .carousel-inner>.item.next.left, .carousel-inner>.item.prev.right {
text-align: -webkit-center;
}
UPDATED SNIPPET
.tales {
width: 100%;
}
.carousel-inner{
width:100%;
max-height: 400x !important;
}
.carousel-inner>.item.active, .carousel-inner>.item.next.left, .carousel-inner>.item.prev.right {
text-align: -webkit-center;
left: 0;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- indicators -->
<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>
<!-- inner -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/1200x600/2c3e50/000" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x1200/d35400/000" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x600/c0392b/000" alt="">
</div>
</div>
<!-- controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Antoher way to center them is by using flexbox. You basically have to add these two properties display: flex; justify-content: center; to your .carousel-inner class. display: flex; will create a flexbox and justify-content: center;will center the images horizontally.
.tales {
width: 100%;
}
.carousel-inner{
width:100%;
display: flex;
justify-content: center;
max-height: 400x !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- indicators -->
<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>
<!-- inner -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/1200x600/2c3e50/000" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x1200/d35400/000" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x600/c0392b/000" alt="">
</div>
</div>
<!-- controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
i think this may help for you. i tried your code it is working fine for me
for a bootstrap carousel or any sliders it is better to pick up all images with same height and width
else, we need to fix the weight and width to some height using css
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.carousel-inner img
{
width: 100%;
height: 500px !important;
}
</style>
<!-- html-->
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- indicators -->
<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>
<!-- inner -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/1200x600/2c3e50/000" class="img-responsive" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x1200/d35400/000" class="img-responsive" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x600/c0392b/000" class="img-responsive" alt="">
</div>
</div>
<!-- controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Related
I need to have a resizable background for the slider
I tried background:url() and background-size:cover
$(window).resize(function() {
$('.item > .image').css('height', $(window).height());
}).trigger('resize');
.image {
background-size:contain;
background-position:center;
background-repeat:no-repeat;
background-image: url('data:img/png;base64,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');
}
<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">
<div class="image"></div>
</div>
<div class="item">
<div class="image"></div>
</div>
<div class="item">
<div class="image"></div>
</div>
<div class="item">
<div class="image"></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>
</div>
<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>
I need a responsive background image to fits desktop and mobile
.hero-section {
background-image: url('https://instapage.com/wp-content/uploads/2018/02/adwords-final-url-770x384.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 35vh;
width: auto;
}
<div class="hero-section"></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>
I have been trying to set the size of the images to same value. I need all the images to appear in the same size(Same height and width). The following is the code for the Carousel. All the images appear in their original sizes. How do I go about achieving this?
<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\banner.jpg" alt="Chania">
</div>
<div class="item">
<img src="images\banner_1.jpg" alt="Chania" >
</div>
<div class="item">
<img src="images\banner_2.png" alt="Flower">
</div>
<div class="item">
<img src="images\banner_3.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>
The CSS code I am using is:
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
height: 40%;
margin: auto;
}
</style>
I created a Bootstrap Carousel in my home page, after some text information. I do not want a big Carousel in my page, so I decreased the size using <div class="col-sm-6">.
But my Carousel is positioned on the left side of the page and I was not able to center it. I would like to have it in the center of my page.
The code that I used was:
<div class="container">
<h4 class="text-justify">text here </h4>
</div>
<div class="container">
<div class="col-sm-6">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="https://upload.wikimedia.org/xx.JPG" alt=""></div>
<div class="item"><img src="https://upload.wikimedia.org/wikipedia/xxxx.JPG" alt=""></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></div>
My CSS code was
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
How can I change the position?
First you have to place your col-sm-6 inside a row, then you can simply add a class "col-centered" and add the following CSS
.col-centered{
float: none;
margin: 0 auto;
}
Your final code will be like this:
<div class="container">
<h4 class="text-justify">text here </h4>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-centered">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="https://upload.wikimedia.org/xx.JPG" alt=""></div>
<div class="item"><img src="https://upload.wikimedia.org/wikipedia/xxxx.JPG" alt=""></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>
</div>
</div>
Apply this style. This below code will work.
<div class="col-sm-6" style="
margin: 0 auto;
float: none;">
<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>