I am trying to make a carrousel that changes the content (mostly images) and I am using (obviously) indicators for that and a user should be able to change the content just by hovering these indicators (not even having to click them) to make this happen. I decided to make use of the Bootstrap carrousel and my current code now looks like this:
$(document).ready(function() {
$("#carousel-example-generic li").hover(function() {
if ($("#carousel-example-generic li").hasClass("active")) {
$("#carousel-example-generic li").removeClass("active");
$(this).addClass("active");
$("#carousel-example-generic").carousel($(this).data("slide-to"));
}
});
});
#carousel-example-generic {
background-color: black;
}
#carousel-example-generic .carousel-indicators {
left: auto;
width: auto;
margin-left: auto;
}
#carousel-example-generic .carousel-indicators li {
display: block;
width: 200px;
/* How should I change height?: */
height: 124px;
border: 0;
border-radius: 0;
margin: 1px 0 0 0;
background-color: red;
text-indent: 0;
color: #fff;
}
#carousel-example-generic .carousel-indicators li.active {
background-image: none;
background-color: #009fc3;
}
#media screen and (min-width: 768px) {
#carousel-example-generic .carousel-indicators {
bottom: auto;
}
}
<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/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<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">One</li>
<li data-target="#carousel-example-generic" data-slide-to="1">Two</li>
<li data-target="#carousel-example-generic" data-slide-to="2">Three</li>
<li data-target="#carousel-example-generic" data-slide-to="3">Four</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
<div class="carousel-caption">
First one
</div>
</div>
<div class="item">
<img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
<div class="carousel-caption">
Then two
</div>
</div>
<div class="item">
<img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
<div class="carousel-caption">
Third slide
</div>
</div>
<div class="item">
<img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
<div class="carousel-caption">
Last slide
</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>
JSFiddle
The problem is that with this code, everytime I hover over an indicator, it will be stored as an action in a "queue" or "stack" up everytime a hover happened. So if I move very quickly up and down with the cursor above the indicators, the carousel still tries to do every action that is "saved?" in that "queue" or "stack". Is there anyone that can explain me what is happening and how I can make my idea work fine (prevent the actions from being "stacked") and instantly go to the next "slide" on hover? Is it possible to keep the solution close to the JQuery I used, i.e. I'm making use of the Bootstrap carrousel indicators which already have Bootstrap JavaScript running on them?
I solved this using a simple "timeout" solution.
$(document).ready(function() {
var itemNum = null;
var timeoutId = null;
$("#carousel-example-generic li").hover(
function() {
$("#carousel-example-generic li").removeClass("active");
$(this).addClass("active");
itemNum = $(this).data("slide-to")
timeoutId = setTimeout(
function() {
if(itemNum != null) {
$("#carousel-example-generic").carousel(itemNum);
}
}, 200);
},
function() {
clearTimeout(timeoutId);
}
);
});
JSFiddle
"onHover" you still removing and adding active classes for the li tags, but now you are adding timeout for changing the slider.
In the timeout, you add a 200 milisecounds waiting period for all hover functions to stop, and when its all done, you change it to the slider.
The final phase is making sure that if the hover was disabled (on mouse out), you clear the timeout.
This will make your carrousel nice and smooth.
Good Luck!
Quick answer: Forget about timeouts, just don't push unwanted actions to stack.
Sadly bootstraps Carousel doesn't have any public function to test if it is currently animating or not. BUT it changes the DOM tree when it does. Just check if classes .next and .prev are present before you push another action into the stack.
From this point its fairly easy. Change your JavaScript code to something like this:
$(document).ready(function() {
var slideshow = $('#carousel-example-generic');
// Fire The click event to switch slides on hover
// But only when .next or .prev classes are not present AKA carousel is currently not animating.
slideshow.find('li').hover(function() {
if ((slideshow.find('.next, .prev').length === 0)){
$(this).click();
}
});
// Initialize the carousel
slideshow.carousel();
});
$(document).ready(function() {
var slideshow = $('#carousel-example-generic');
// Fire The click event to switch slides on hover
// But only when .next or .prev classes are not present AKA carousel is currently not animating.
slideshow.find('li').hover(function() {
if ((slideshow.find('.next, .prev').length === 0)){
$(this).click();
}
});
// Initialize the carousel
slideshow.carousel();
});
#carousel-example-generic
{
background-color: black;
}
#carousel-example-generic .carousel-indicators
{
left: auto;
width: auto;
margin-left: auto;
}
#carousel-example-generic .carousel-indicators li
{
display: block;
width: 200px;
/* How should I change height?: */
height: 124px;
border: 0;
border-radius: 0;
margin: 1px 0 0 0;
background-color: red;
text-indent: 0;
color: #fff;
}
#carousel-example-generic .carousel-indicators li.active
{
background-image: none;
background-color: #009fc3;
}
#media screen and (min-width: 768px)
{
#carousel-example-generic .carousel-indicators
{
bottom: 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">One</li>
<li data-target="#carousel-example-generic" data-slide-to="1">Two</li>
<li data-target="#carousel-example-generic" data-slide-to="2">Three</li>
<li data-target="#carousel-example-generic" data-slide-to="3">Four</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
<div class="carousel-caption">
First one
</div>
</div>
<div class="item">
<img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
<div class="carousel-caption">
Then two
</div>
</div>
<div class="item">
<img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
<div class="carousel-caption">
Third slide
</div>
</div>
<div class="item">
<img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
<div class="carousel-caption">
Last slide
</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>
--
Foot notes:
You were using the carousel plugin kinda wrong. Your code initialized the plugin every time you hovered the switches. Also the "slide to" function is built-in in data attributes so it's enough to fire the "virtual" click event on the corresponding switch (li) and the plugin will do the rest.
Related
I have a carousel which contains a heading agenda-date-heading. I want that heading to become fixed on scrolling. Right now it doesn't get fixed. The top property of css in the class fixed-position only changes its position on scroll and not actually fix it. Any suggestions on how to get what I am planning to get here?
<div class="container-fluid clearfix" style="padding-left:0; padding-right:0;">
<div id="left-side" class="agenda-container">
<div id="agenda-date-container" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active agenda-date" id="dec12">
<h1 class="text-center agenda-date-heading">December 12</h1>
</div>
<div class="carousel-item agenda-date" id="dec13">
<h1 class="text-center agenda-date-heading">December 13</h1>
</div>
<a class="carousel-control-prev" href="#agenda-date-container" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#agenda-date-container" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
This is the css of the what I am trying to implement
.fixed-position {
width: 50%;
position: fixed;
top:20%;
}
#dec12 {
background-color: #0081c8;
}
#dec13 {
background-color: #0b8400;
}
.agenda-date {
color:white;
font-size: 2em;
line-height: 2em;
margin:auto;
}
#agenda-date-container>.carousel-inner>.carousel-item {
height:40em;
}
.agenda-container {
width:50%;
position: relative;
margin:0;
}
.agenda-date-heading {
width:100%;
height:20%;
padding-top:50%;
padding-bottom:20%;
}
And this is my jquery
var dateOffsetY = $('#agenda-date-container').offset().top;
function dateOffsetScroll(){
if($(window).scrollTop()>=dateOffsetY) {
$('.agenda-date-heading').addClass("fixed-position");
}else {
$('.agenda-date-heading').removeClass("fixed-position");
}
}
document.onscroll = dateOffsetScroll;
I have a website where I display some users' pictures. The pictures have a squared shape and a fixed size (100x100 px). I would like to create a carousel if there is not enough space to display all the user's pictures in a single line. And I would like this carousel be activated/deactivated if I resize my browser's window.
I don't know if it's possible easily and if bootstrap's carousel is the best choice !
Thanks in advance for any advices !
Is it what you want to achieve?
https://codepen.io/glebkema/pen/QvvowE
var isCarouselPaused = false;
$( window ).on( 'load resize', function() {
if ( document.documentElement.clientWidth >= 768 ) {
if ( !isCarouselPaused ) {
$( '#myCarousel' ).carousel('pause');
isCarouselPaused = true;
}
} else {
if ( isCarouselPaused ) {
$( '#myCarousel' ).carousel('cycle');
isCarouselPaused = false;
}
};
});
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
#media (min-width: 768px) {
.carousel .item {
display: block;
float: left;
margin: 12px;
}
.carousel-control,
.carousel-indicators {
display: none;
}
}
/* Make the images wide and responsive. */
.carousel-inner img {
height: auto;
width: 100%;
}
/* Decorations */
.carousel {
margin-bottom: 20px;
margin-top: 20px;
}
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="https://placehold.it/100x100/fc3/fff/?text=1" alt=""></div>
<div class="item"><img src="https://placehold.it/100x100/693/fff/?text=2" alt=""></div>
<div class="item"><img src="https://placehold.it/100x100/369/fff/?text=3" alt=""></div>
<div class="item"><img src="https://placehold.it/100x100/f63/fff/?text=4" alt=""></div>
<div class="item"><img src="https://placehold.it/100x100/936/fff/?text=5" alt=""></div>
</div>
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Maybe this is one of the toughest challenges, how can I vertically align in the middle the showing images on this fixed height Bootstrap (v3.3.5) carousel? I'd tried to display some classes as a table-cell and vertical-align them to middle but there's still a problem, the sliding image will just be vertically aligned when sliding-completed or when .active but it will also placed the image on the right side instead to the center.
/* The styles that I tried.
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
display: table-cell;
vertical-align: middle;
} */
.carousel-inner > .item {
height: 150px;
}
.carousel-inner img {
margin: auto;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<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/350x65" alt="350x65">
<div class="carousel-caption">
<h3>Item 1</h3>
<p>Not vertically center..</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/350x150" alt="350x150">
<div class="carousel-caption">
<h3>Item 2</h3>
<p>The image height is just fit..</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/200x100" alt="200x100">
<div class="carousel-caption">
<h3>Item 3</h3>
<p>Not vertically center..</p>
</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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
Add this to your css:
.carousel-inner .item img {
position:relative;
top:50%;
transform: translateY(-50%);
}
You can position the element absolutely ensuring the parent element is position relative so that the child element respects it's position to it.
.carousel-inner > .item {
height: 150px;
position: relative;
}
.carousel-inner img {
position: absolute;
top: 50%;
left: 0;
right: 0;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
Set position:absolute, all sides to 0 and margin:auto.
Here you go:
/* The styles that I tried.
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
display: table-cell;
vertical-align: middle;
} */
.carousel-inner > .item {
height: 150px;
}
.carousel-inner img {
margin: auto;
}
.carousel-inner .item img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<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/350x65" alt="350x65">
<div class="carousel-caption">
<h3>Item 1</h3>
<p>Not vertically center..</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/350x150" alt="350x150">
<div class="carousel-caption">
<h3>Item 2</h3>
<p>The image height is just fit..</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/200x100" alt="200x100">
<div class="carousel-caption">
<h3>Item 3</h3>
<p>Not vertically center..</p>
</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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
See if this is what you're looking for: should probably test it with actual images just to make sure it looks right.
.carousel-inner .item img {
margin: 0px auto;
height: 150px;
text-align: center;
}
This question already has answers here:
How do I determine the size of an object in Python?
(16 answers)
Closed 8 years ago.
how do I create a carousel that is responsive with the width of the browser or device, keeps the aspect ratio of the images it contains and also stays responsive with the height of the image as it shrinks when you reduce the size of the browser...
I would like the carousel to centre on the page when the image is at its largest width.
I this is my code so far, I will post my web address below to give a full illustration of how it behaves;
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
padding-bottom: 40px;
color: #5a5a5a;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
color: #FFD700;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
max-width: 100%;
width: auto;
height: auto;
vertical-align: middle;
}
.carousel-indicators li {
background-color: #999;
}
.carousel-indicators li:hover {
background-color: #444;
}
.carousel-indicators .active {
background-color: #666;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
font-size: 100px;
color: blue;
margin-top: -70px
}
/* RESPONSIVE CSS
-------------------------------------------------- */
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 25px;
line-height: 1.4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide under-nav" 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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="http://buzzingbikes.com/static/img/road_bike.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>A Boost Of Power</h1>
<p>Checkout our new stock! Nothing feels better than the wind blasting past your streaming eyes, like our lightweight Road bike frames!</p>
<p><a class="btn btn-lg btn-primary" href="{% url 'products' %}" role="button">Check 'em out!</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="http://buzzingbikes.com/static/img/ehline3.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Take It To Another Level</h1>
<p>With out streamlined beautifully slick and super fast range you'll get from A to B in no time at all!</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="http://buzzingbikes.com/static/img/New-36V-350-Watt-Lithium-Battery-Electric-Snow-Bike-Electric-Bicycle-SHIMAN0-21-Speed-Mountain-Bike.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I really need help, I have searched high and low and cant find a simple answer...
my website is http://buzzingbikes.com/
play around with the size of the browser to get an idea of what I'm up against...
Do I need to use javascript and if so what do I need to do?
I'd appreciate any help to get this working correctly...
Thanks everyone
Yes, sys.getsizeof does what you require. See https://docs.python.org/3/library/sys.html#sys.getsizeof for more details. Of course, you need to import sys before you can call it!
For example:
>>> import sys
>>> sys.getsizeof('short')
42
>>> sys.getsizeof('a very long and convoluted string')
70
As you see, getsizeof also informs you about overhead related to the object you're passing to it -- so e.g the string 'short' overall consumes 42 bytes, not just the 5 bytes of its characters (in Python 3, sys.getsizeof('short') returns 54 -- there, it's a Unicode string, so it consumes more space than in Python 2 where it's a byte string!-)
This question already has an answer here:
How to vertically center a Bootstrap carousel-caption?
(1 answer)
Closed 6 years ago.
The carousel I am referring to is Bootstrap's carousel (http://getbootstrap.com/examples/carousel/).
I am using the similar code from the example, but I can't place the contents right middle of the parent.
As you can see, the contents are not centered. I've tried setting the carousel-caption{ vertical-align:middle;}, but nothing changes.
<div class="carousel-inner">
<div class="item active">
<div class="container">
<div class="carousel-caption">
!!contents!!
</div>
</div>
</div>
</div>
This is the same code from the example. How can I vertically center the carousel-caption?
.full-width {
width: 100%;
}
.carousel-caption {
position: absolute;
top: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/300x200" class="full-width" />
<div class="carousel-caption">
<div class="full-width text-center">
<p>
Some text which is vertically, horizontally centered in image
</p>
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/300x200" class="full-width" />
<div class="carousel-caption">
<div class="full-width text-center">
Some text which is vertically, horizontally centered in image
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example" 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" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
The above image is a screenshot of demo.
The image is responsive
Caption text is vertically and horizontally centered in the image
for IE8 and above
.carousel-caption{
display:table-cell;
vertical-align:middle;
}
the easiest way is to use a combination of display:inline-block and line-height, eg.
.container {
line-height: 100px // height of your carousel
}
.carousel-caption {
line-height: normal; // restore original line height here
display: inline-block;
vertical-align: middle;
}
see example here: http://jsfiddle.net/bQs26/