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;">
Related
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 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>
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 have a bootstrap carousel here in jsfiddle and I'm trying to see if I can style the controls/arrows on the left and right side so they don't show a darker area both with and without hovering over the arrows/side area. I just want the arrows to highlight when they get hovered over.
Here is my basic carousel code
.item img {width: 100%; height: auto}
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/450x350" alt="Slide 1">
<div class="carousel-caption">
Caption Slide 1
</div>
</div>
<div class="item">
<img src="http://placehold.it/450x350" alt="Slide 2">
<div class="carousel-caption">
Caption Slide 2
</div>
</div>
<div class="item">
<img src="http://placehold.it/450x350" alt="Slide 3">
<div class="carousel-caption">
Caption Slide 3
</div>
</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>
So, I've got a problem when trying to use a bootstrap example.
I've copied a carousel example from bootstrap's page, and tried to use it in my own project.
However, as seen on the picture -
The carousel is not centered, and the prev/next buttons are going to the far left/right, instead of being over the picture, as per bootstrap example here
The code that I'm using is:
<body role="document">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
the navbar on the top of the page</nav>
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://i.imgur.com/SO9y5OH.jpg" alt="...">
<div class="carousel-caption">
1
</div>
</div>
<div class="item">
<img src="http://i.imgur.com/1dWsLKB.jpg" alt="...">
<div class="carousel-caption">
2
</div>
</div>
<div class="item">
<img src="http://i.imgur.com/GNZb3UZ.jpg" alt="...">
<div class="carousel-caption">
3
</div>
</div>
</div>
<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>
</body>
As I'm not that well-versed in html, could you please tell me, how to fit the thing neatly into the page?
wrap it into .container>.row>.col-sm-12
`<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- your carousel goes here -->
</div>
</div>
</div>
</div>`