By default, indicators are aligned horizontally at the bottom, respectively,
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<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="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</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>
What is the best way to align the the indicators vertically, so that the indicators are always evenly distributed among the height of the image used within the carousel, with equal space to each indicator? I noticed that the height of the element with id carousel-example-generic changes based on the image used within the carousel due to a css property (which probably is at default) height: auto;.
Should I use a formula that looks something like:
Height of element with an id of carousel-example-generic / amount of indicators = height of indicator?
Should I use JavaScript in order to achieve what I ask here?
I want to achieve something like this JSFiddle, but I do not want to use a fixed height number for my indicators, I want them to always use the full space they can use within the carousel.
Edit: My guess is that the height of the indicators should be calculated with a formula which I show in the following JSFiddle.
You can use javascript to achieve the result.
You can read the height of the carousel and divide for the li element numbers.
var carouselHeight = $("#carousel-example-generic").css("height");
var elements = $("#carousel-example-generic li").length;
var indicatorHeight = Math.floor(Number(carouselHeight.replace("px", "")) / elements);
$("#carousel-example-generic .carousel-indicators li").css("height", indicatorHeight + "px");
I have made a simple JSFiddle
First You Remove or comment Left and right controls
.carousel-indicators li{
display: block;
width: 10px;
height: 10px;
margin-bottom: 10px;
}
.carousel-indicators li display as 'inline-block' is change the 'block' Indicators show vertically
.carousel-indicators .active {
width: 12px;
height: 12px;
margin-bottom: 10px;
background-color: #fff;
}
Give space for Indicators so, set margin-bottom is 10px and active class also
.carousel-indicators{
height: 350px;
display: table-cell;
vertical-align: middle;
float: none;
}
Indicators show the the middle in height set for your image size(slider)
Related
Below there are two webpages. Everything is the same except the length of paragraphs (the p tag). But the two webpages look slightly different (in terms of aligment).
In other words, the page with fewer paragraphs is aligned left compared with the page with more paragraphs.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
body{
margin:0 auto;
font-family:Helvetica Neue, Helvetice-Neue, Helvetica;
font-weight:200;
font-size:16px;
color:#2f2f2f;
}
.breakv{
float:left;
width:2px;
height:200px;
margin-top:78px;
margin-right:3px;
padding-top:18px;
padding-left:2px;
background:url(images/breakv.png) repeat-y;
}
strong{
color:#0074B4;
}
.breakh{
width:370px;
margin:0 auto;
padding-top:8px;
height:4px;
background:url(images/breakh.png) bottom repeat-x;
}
.navbar{
background-color:#57b7df;
font-family:Helvetica Neue, Helvetice-Neue;
font-weight:100;
line-height:21px;
border-color:transparent;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 50%;
margin: auto;
}
</style>
</head>
<body class="container">
<div class="container-fluid">
<img src="./images/header.png" class="img-responsive">
</div>
<div style="background-color:#57b7df" class="container-fluid">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Photos</li>
<li class="active">Prices</li>
<li>Instructions</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid hidden-sm hidden-xs">
<img src="images/prices1.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
<img src="images/prices3.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
<img src="images/test3.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
</div>
<div id="myCarousel" class="carousel slide hidden-md hidden-lg hidden-xl" 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" role="listbox">
<div class="item active">
<img src="images/prices1.png" >
</div>
<div class="item">
<img src="images/prices2.png">
</div>
<div class="item">
<img src="images/test3.png">
</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 class="col-md-5 col-xs-12 col-sm-12">
<h3>Private or Party</h3>
<p>Do you need a quick tan just for yourself or are you thinking of making it a fun event for you and your friends? <strong>A Kiss of Bronze Airbrush Tanning</strong> offers both personal tanning sessions and tanning parties!</p>
<p>Never heard of a tanning party? You've heard of lingerie parties, cosmetics parties, jewelry parties, even tupperware parties!!! Well now it's time to introduce <strong>TANNING PARTIES</strong>!</p>
<p>You and a minimum of five (5), max of ten (10), friends get together, and you all get tanned in one session. The hostess of six (6) or more people gets to <strong>tan for free</strong>!</p>
</div>
</body>
</html>
With more text:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
body{
margin:0 auto;
font-family:Helvetica Neue, Helvetice-Neue, Helvetica;
font-weight:200;
font-size:16px;
color:#2f2f2f;
}
.breakv{
float:left;
width:2px;
height:200px;
margin-top:78px;
margin-right:3px;
padding-top:18px;
padding-left:2px;
background:url(images/breakv.png) repeat-y;
}
strong{
color:#0074B4;
}
.breakh{
width:370px;
margin:0 auto;
padding-top:8px;
height:4px;
background:url(images/breakh.png) bottom repeat-x;
}
.navbar{
background-color:#57b7df;
font-family:Helvetica Neue, Helvetice-Neue;
font-weight:100;
line-height:21px;
border-color:transparent;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 50%;
margin: auto;
}
</style>
</head>
<body class="container">
<div class="container-fluid">
<img src="./images/header.png" class="img-responsive">
</div>
<div style="background-color:#57b7df" class="container-fluid">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Photos</li>
<li class="active">Prices</li>
<li>Instructions</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid hidden-sm hidden-xs">
<img src="images/prices1.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
<img src="images/prices3.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
<img src="images/test3.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
</div>
<div id="myCarousel" class="carousel slide hidden-md hidden-lg hidden-xl" 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" role="listbox">
<div class="item active">
<img src="images/prices1.png" >
</div>
<div class="item">
<img src="images/prices2.png">
</div>
<div class="item">
<img src="images/test3.png">
</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 class="col-md-5 col-xs-12 col-sm-12">
<h3>Private or Party</h3>
<p>Do you need a quick tan just for yourself or are you thinking of making it a fun event for you and your friends? <strong>A Kiss of Bronze Airbrush Tanning</strong> offers both personal tanning sessions and tanning parties!</p>
<p>Never heard of a tanning party? You've heard of lingerie parties, cosmetics parties, jewelry parties, even tupperware parties!!! Well now it's time to introduce <strong>TANNING PARTIES</strong>!</p>
<p>You and a minimum of five (5), max of ten (10), friends get together, and you all get tanned in one session. The hostess of six (6) or more people gets to <strong>tan for free</strong>!</p>
<p><strong>Tanning parties</strong> are great for Girls Night In, Up-coming Special Occasions, Swimsuit Competitions, Pre-Holiday Tan Parties or if you just want to have some girlfriends over and treat yourselves!</p>
<p>Wear dark, loose fitting clothes (ie. tracksuit, sweats). You may want to bring a bathrobe or swim suit cover-up to wear after your <strong>airbrush tan</strong> while you're drying.</p>
<p>To all those ladies who are uncomfortable about your figure, don't worry! Discuss your requirements beforehand whether you want to wear a bikini, swimsuit or shorts. We deal with all shapes, sizes and ages so please do not feel nervous or embarrassed.</p>
<div style="float:right; padding-left:8px;"><img src="images/stickerbride.png" class="img-responsive"/></div>
<p>All brides want to look radiant on the biggest and happiest day of their lives, and nothing will give you that beautiful bride glow like a sun kissed tan. Have a trial tan a few weeks before the big day so you can judge for yourself which day after your spray tan application you feel that your tan is at its best. This gives you enough planning time to book again before the big day!</p>
<p>**Call for special pricing.</p>
</div>
</body>
</html>
How am I supposed to do to make the pages look exactly the same in terms of alignment of page components?
I tried the same pages on a different browser, MSEdge. Curiously, every page looks the same in terms of alignment.
If you are using Bootstrap, there are frequently :first-child and :last-child pseudoelements applied. That would be the first place to look.
Could you please throw your code sample into a jsfiddle to demonstrate the issue you're having?
The only difference seems to be the scrollbar. So, the only thing you would need to do is to put overflow-y: scroll; in your body CSS selector.
---------- Buzinas
is the correct answer. Buzinas, you save my day!!!Many thx!
I need to make my bootstrap 3 carousel-caption take half of my carousel, to make caption background-color a little transparent, and write some text into it.
So the logic is that in carousel background I will have pictures and for every picture caption will take half of carousel whit custom text.
See my JSFIDDLE example, and I want to make it like this.
So far I manage to set up background of carousel-caption, and I know how to pull it to the left, the problem is right side, it's just confusing how does float: right want work, further more there is a small padding-bottom so how can I remove this? Can any one help me over come this and build it properly, thanks.
<!-- Carousel -->
<div id="homeCarousel" class="carousel slide">
<!-- Menu -->
<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>
<!-- Items -->
<div class="carousel-inner">
<!-- Item 1 -->
<div class="item active">
<img src="http://lorempixel.com/1500/600/abstract/1" />
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p>This is an example layout with carousel that uses the Bootstrap 3 styles.</p>
<p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
</p>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/2" />
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a>
</p>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/3" />
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
<p><a class="btn btn-large btn-primary" href="#">Browse gallery</a>
</p>
</div>
</div>
</div>
</div>
<!-- Controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
Carousel CSS:
#carouselButtons {
margin-left: 100px;
position: absolute;
bottom: 0px;
}
.carousel-caption {
position: absolute;
left: auto;
right: auto;
width: 50%;
height: 100%;
background-color: #428bca;
opacity: 0.8
}
You were very close - I added a reference to jquery in your fiddle, but the alignment issues you were facing were resolved by using the bottom and right properties. Float was not the way to go here, since you already had .carousel-caption positioned absolutely, I just added a right:0, and a bottom:0 to your class.
.carousel-caption {
position: absolute;
left: auto;
right: auto;
width: 50%;
height: 100%;
background-color: #428bca;
opacity: 0.8;
bottom:0;
right:0;
}
See the updated Fiddle here
https://jsfiddle.net/jy989rkt/4/
I'm using a Bootstrap carousel to display images and their respective captions. The image can be portrait, landscape.
I'm able to correctly display landscape images in the carousel with their caption below. In case of Portrait images I'm trying to align the centre image to the right so that it does not overlap with the caption. I changed the CSS property in file bootstrap.min.css but it's not working.
CSS code...
.carousel-inner {
position: relative;
align: right;
width: 100%;
overflow: hidden;
Any idea how to align Portrait image to the right without affecting the other 2 images?
The obj parameter is contains the image src, caption details. The values are being returned by an ajax function being called to the back-end service.
HTML Code..
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<div id="carouselObject">
<div id="carousel-example-generic" class="carousel slide" data-pause="true" data-interval="5000000"> <!--data-interval= 5000 seconds-->
<div class="carousel-inner" role="listbox" id="carouselinner">
</div>
<a class="left carousel-control" href="#/carousel-example-generic" role="button"> <!--data-slide="prev"-->
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" onclick="loadPrevSlide()" id="leftcarouselbutton"></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" onclick="loadNextSlide()" id="rightcarouselbutton"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
i have created code pen for similar carousel slider. have a look at once it may helpful for you.
<head> <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.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="carosel-example">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-captions" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="900x500" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
<div class="carousel-caption">
<h3>First slide </h3>
<p> ContentContentContentContentContentContent</p>
</div>
</div>
<div class="item">
<img alt="900x500" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
<div class="carousel-caption">
<h3>Second slide</h3>
<p>Content</p>
</div>
</div>
<div class="item">
<img src="http://a.static.trunity.net/files/299501_299600/299598/vertical-farming-chris-jacobs.jpg">
<div class="carousel-caption">
<h3>Third slide</h3>
<p>Content</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
///// CSS code goes here
.carousel-caption {
color: #000;
}.carosel-example, .new-caption-area {
width: 600px;
margin: auto;
color: #000;
}
////////////// JS CODE
jQuery(function ($) {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('.new-caption-area').html(caption.html());
caption.css('display', 'none');
$(".carousel").on('slide.bs.carousel', function (evt) {
var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index() + 1) + ') .carousel-caption');
$('.new-caption-area').html(caption.html());
caption.css('display', 'none');
});
});
http://codepen.io/srinivasr/pen/EPdxKG
I have downloaded bootstrap and have the following code in the head section
<link ref="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
<script src="js/respond.js"></script>
However I want my whole slider to be 100% in width and the images to be 80% wide however my images although I have used margin-left: auto;
margin-right: auto; doesn't want to centre it creeps over to the right.
My code is
<div id="the-slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#the-slider" data-slide-to="0" class="active"></li>
<li data-target="#the-slider" data-slide-to="1"></li>
<li data-target="#the-slider" data-slide-to="2"></li>
<li data-target="#the-slider" data-slide-to="3"></li>
<li data-target="#the-slider" data-slide-to="4"></li>
<li data-target="#the-slider" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-2.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 1-->
<div class="item">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-1.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 2-->
<div class="item">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 2-->
<div class="item">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-3.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 2-->
<div class="item">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-4.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 2-->
<div class="item">
<img src="file:///Users/Luke/Documents/Aviramp/Images/Slideshow-5.jpg" class="img-responsive" alt="..." id="img">
</div> <!--item 2-->
</div> <!--carousel-inner-->
<!--controls-->
<a class="left carousel-control" href="#the-slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#the-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--the-slider-->
<!--container-->
<!-- javascript -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
#img {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#the-slider {
width: 100%;
}
</style>
As you will see it creeps to the right, look at photo attached to see what I mean. Its only slight but I NEED it central!
If you are using the class .img-responsive, you need to use margin:0px auto to center.
Hint, set the width you want, to a parent div, and center the image with margin: 0px auto;
I have tried to simulate your problem on JSFiddle. The aligning should be fine with just:
img {
margin: auto auto;
}
https://jsfiddle.net/e1mw6myL/
I just got some random pictures in it. The first picture is smaller than other.. It could be that your image is too big (there is a max-width: 100% on .img-responsive)
Try using other images and look if those images give you the same problem.
I'm trying to make a carousel with videos. With the images it works fine the image are responsive even in mobile view. But with videos the width is responsive but not the height. Basically I would like to achieve the same comportement with a carousel image but with a video. I've tried many tricks online but none is doing it. My video is 1024/552px
Tried my best at a fiddle. You can see if you load the fiddle with a small width, it keeps the same height and it isn't responsive but the width of the carousel/video is (it crops the video on the sides though). It doesn't have the same comportement as an image. As you will see I have included an image in the second slide to further demonstrate my problem.
https://jsfiddle.net/687bsb21/1/
Here's the code :
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div align="center">
<video autoplay loop>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" width="1024" height="552" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="carousel-caption">
<h3>hello</h3>
<p>hello</p>
</div>
</div>
<div class="item">
<img src="http://dummyimage.com/1024x552/000/fff" class="img-responsive" alt="asfds">
<div class="carousel-caption">
<h3>hello</h3>
<p>hello.</p>
</div>
</div>
<a class="left carousel-control" href="#carouselHelp" 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="#carouselHelp" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Thanks for helping.
add your css,
video{
width:100%
}
also adding the width/height directly to the tag works:
<video autoplay loop width="1024" height="552">
regards.
This is the best solution:
<div class="container">
<video><source src="video.mp4" type="video/mp4"></video>
</div>
.container{
position: relative;
width: 100%
}
.container video{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}