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;
}
Related
I want to be able to have a carousel with the div's inside centered with a stroller.
Here are the images:
This is what I currently have:
I would love to center those two boxes within the arrows:
I want the arrows to slide between the three boxes: Right arrow: From 2 -> 3 -> 1 etc.
Here is the code:
$('#carousel-example-generic').carousel({
wrap: true,
interval: false
});
.carousel.slide img {
width: 100%;
height: auto;
}
.carousel img {
border-radius: 0px;
}
.carousel-control.left,
.carousel-control.right {
background: none;
color: #red;
border: none;
}
.carousel-control.left {
margin-left: -45px;
color: black;
}
.carousel-control.right {
margin-right: -45px;
color: black;
}
/* DIV BOXES */
.bottomFarLeftBox {
height: 170px;
width: 290px;
background-color: #4B92DB;
float: left;
clear: none;
}
.bottomMidLeftBox {
height: 170px;
width: 290px;
margin-right: 60px;
background-color: #4B92DB;
float: right;
clear: none;
}
.bottomRightBox {
height: 170px;
width: 310px;
}
.row img {
padding-bottom: 5px;
}
#topLeftColumn {
padding-right: 30px;
}
#bottomLeftColumn {
padding-left: 0px;
}
#bottomRightColumn {
padding-right: 0px;
}
#bottomContactsRow {
display: inline-flex;
}
<div class="col-sm-8">
<h4>Latest Training Documentation</h4>
<hr style="margin-top: 10px;" />
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" class="active"></li>
<!-- data-slide-to="0" -->
<!-- UPDATE ON 3+ SLIDES -->
<!-- <li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li> -->
</ol>
<div class="carousel-inner">
<!-- Slide -->
<div class="item active">
<div class="row">
<div class="col-md-6">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="bottomFarLeftBox">
<h2 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 60px!important; padding-bottom: 5px; padding-right: 6px; vertical-align: middle;" />OneDrive</h2>
<p id="innerBoxText">Store files in one place, share them with others, and get to them from any device connected to the internet.</p>
</div>
</a>
</div>
<div class="col-md-6">
<a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
<div class="bottomMidLeftBox">
<h2 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/delveLogo.png" style="height: 50px!important; width: 50px!important; padding-bottom: 5px; padding-right: 8px; vertical-align: middle;" />Delve</h2>
<p id="innerBoxText">It's more than your employee profile! Get personal insights and relevant information based on who you work with and the content you work on.</p>
</div>
</a>
</div>
</div>
</div>
<!-- Slide -->
<div class="item">
<div class="row">
<div class="col-md-6">
<!-- ADD TRAINING MATERIALS IN HERE -->
</div>
<div class="col-md-6">
<!-- ADD TRAINING MATERIALS IN HERE -->
</div>
</div>
</div>
<!-- Slide -->
<div class="item">
<div class="row">
<div class="col-md-6">
<!-- ADD TRAINING MATERIALS IN HERE -->
</div>
<div class="col-md-6">
<!-- ADD TRAINING MATERIALS IN HERE -->
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
Now you have it
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel.slide img {
width:100%;
height:auto;
}
.carousel img {
border-radius: 0px;
}
.carousel-control.left, .carousel-control.right {
background: none;
color: #red;
border: none;
}
.carousel-control.left {color: black;}
.carousel-control.right {color: black;}
/* DIV BOXES */
.bottomFarLeftBox {
height: 170px;
width: 95%;
margin-left: 5%;
background-color: #4B92DB;
float: left;
clear: none;
}
.bottomMidLeftBox {
height: 170px;
width: 95%;
margin-right: 5%;
background-color: #4B92DB;
float: right;
clear: none;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img{
width: 70%;
height: 200px;
margin: auto;
}
</style>
</head>
<body>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="bottomFarLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>Store files in one place, share them with others, and get to them from any device connected to the internet.</p>
</div>
</div>
</a>
</div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
<div class="bottomMidLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>It's more than your employee profile! Get personal insights and relevant information based on who you work with and the content you work on.</p>
</div>
</div>
</a>
</div>
<div class="col-sm-1"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="bottomFarLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>I am second</p>
</div>
</div>
</a>
</div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
<div class="bottomMidLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>I am second of second</p>
</div>
</div>
</a>
</div>
<div class="col-sm-1"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="bottomFarLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>I am the third</p>
</div>
</div>
</a>
</div>
<div class="col-sm-5">
<a href="/TrainingResourceCenter/O365Training/Pages/Delve.aspx">
<div class="bottomMidLeftBox">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" />
<div class="carousel-caption">
<p>I am the third of third</p>
</div>
</div>
</a>
</div>
<div class="col-sm-1"></div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
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 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.
Is there any option in bootstrap carousel to animate it to top to bottom and bottom to top, instead of right to left and left to right.
jsFiddle
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a>
</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a>
</p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<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" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
You can get change the direction of carousel using this code (The JSFiddle example at the end)
Pay attention to the CSS vertical class selector
CSS: ( the essence of the change of carousel direction )
.vertical .carousel-inner {
height: 100%;
}
.carousel.vertical .item {
-webkit-transition: 0.6s ease-in-out top;
-moz-transition: 0.6s ease-in-out top;
-ms-transition: 0.6s ease-in-out top;
-o-transition: 0.6s ease-in-out top;
transition: 0.6s ease-in-out top;
}
.carousel.vertical .active {
top: 0;
}
.carousel.vertical .next {
top: 400px;
}
.carousel.vertical .prev {
top: -400px;
}
.carousel.vertical .next.left,
.carousel.vertical .prev.right {
top: 0;
}
.carousel.vertical .active.left {
top: -400px;
}
.carousel.vertical .active.right {
top: 400px;
}
.carousel.vertical .item {
left: 0;
}
Javascript:
$('.carousel').carousel({
interval: 3000
})
HTML:
<div class="container">
<div class="row-fluid">
<div class="span6 offset3">
<div id="myCarousel" class="carousel slide vertical">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="http://placehold.it/600x400&text=First+Slide">
</div>
<div class="item">
<img src="http://placehold.it/600x400&text=Second+Slide">
</div>
<div class="item">
<img src="http://placehold.it/600x400&text=Third+Slide">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
You can see it in action here: http://jsfiddle.net/wram2h2p/
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/