Bootstrap carousel and responsiveness - javascript

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>

Related

How to make a horizontal scrolling strip with divs partly out of viewport

I am trying to make a div with 4 or 5 other divs in it and I want to be able to horizontally scroll/swipe the divs.
I've tried some of the things I could find here on StackOverflow, but nothing provided me with what I intend to do. I also don't really know what to look for (name of scripts) so that makes it extra difficult.
I hope someone can point me in the right direction!
.outerDiv {
width: 1000px;
display: flex;
flex-direction: row;
}
.innerDiv {
width: 200px;
height: 200px;
background-color: grey;
margin: 10px;
}
<div class="outerDiv">
<div class="innerDiv"></div>
<div class="innerDiv"></div>
<div class="innerDiv"></div>
<div class="innerDiv"></div>
<div class="innerDiv"></div>
</div>
It is not recommended to do things like this. You force browser to render something which is not shown to the user anyway. Also it might be tricky to handle this with different aspect ratio on screens like 21:9, 32:9 etc.
I would rather suggest you to use something like carousel (e.g. with Materialize https://materializecss.com/carousel.html)
If you really want to do it like this, you can try messing with css properties position: absolute; and position: relative;
Here the snippet that you want
$('#recipeCarousel').carousel({
interval: 2000
})
$('.carousel .carousel-item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<3;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.33333%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.33333%);
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{
transform: translateX(0);
}
</style>
<div class="container text-center my-3">
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<img class="d-block col-4 img-fluid" src="http://placehold.it/350x180?text=1">
</div>
<div class="carousel-item">
<img class="d-block col-4 img-fluid" src="http://placehold.it/350x180?text=2">
</div>
<div class="carousel-item">
<img class="d-block col-4 img-fluid" src="http://placehold.it/350x180?text=3">
</div>
<div class="carousel-item">
<img class="d-block col-4 img-fluid" src="http://placehold.it/350x180?text=4">
</div>
<div class="carousel-item">
<img class="d-block col-4 img-fluid" src="http://placehold.it/350x180?text=5">
</div>
<div class="carousel-item">
<img class="d-block col-4 img-fluid" src="http://placehold.it/350x180?text=6">
</div>
</div>
<a class="carousel-control-prev" href="#recipeCarousel" 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="#recipeCarousel" 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>
<!-- Scripts are here -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
I tried multiple things (the answers above and other carousel libraries) and I ended up using OwlCarousel. https://owlcarousel2.github.io/OwlCarousel2/

I have a h1 heading inside my carousel item and i want to fix the position of that heading on scrolling

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;

Carrousel hover actions stack in JQuery

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.

Vertically center the showing images on a fixed height Bootstrap carousel

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;
}

How to make contents inside carousel vertically center? [duplicate]

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/

Categories