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/
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 have the images at a set height and width since they are different sizes, so how do I center carousel itself?
I honestly have no clue where to start, because I don't know how to do it without screwing up bootstrap styling. Any help would be appreciated.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Balloons Flowers and Gifts</title>
<link rel="stylesheet" type="text/css" href="css/bfg.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=News+Cycle" type="text/css" rel="stylesheet">
<!-- Spent two hours trying to figure out why my customized CSS wouldn't load in, then realized that I put it in front of bootstrap... -->
<script src="https://use.fontawesome.com/7a267289ed.js"></script>
<link rel="stylesheet" type="text/css" href="css/bfg.css">
<link rel="icon" href="img/icon.png">
</head>
<body>
<div class="container-fluid main-section">
<nav class=" navbar navbar-default">
<div class="container-fluid col-md-12 col-xs-12">
<div class="headers-bfg">
<div class="navbar-header">
<a class="navbar-brand" href="#">BFG</a>
</div>
<div class="navbar-header">
<a class="navbar-brand col-xs-2" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
<ul class=" nav navbar-nav ">
<li>Balloons</li>
<li><i class="fa fa-small fa-circle" aria-hidden="true"></i></li>
<li>Flowers</li>
<li><i class="fa fa-circle" aria-hidden="true"></i></li>
<li>Gifts</li>
<li><i class="fa fa-circle" aria-hidden="true"></i></li>
<li>Hours</li>
</ul>
</div>
</nav>
<div class="">
<div class="row">
<div class="col-md-12 col-xs-12 text-center main">
<h1>Balloons Flowers and Gifts</h1>
<h3>The perfect way to brighten someone's day, and make them smile!</h3>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-xs-12 text-center info-panel balloon-sect">
<h2>Balloons</h2>
<p> Our hand crafted balloon creations are a hit at every paty! We have a wide variety of colored and themed balloons ranging from Pokemon GO to a life sized stormtrooper! We also do balloon arches and towers for events!</p>
<div id="myCarousel" class="carousel center slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/f1.jpg" alt="Chania">
</div>
<div class="item">
<img src="img/f2.jpg" alt="Chania">
</div>
<div class="item">
<img src="img/f3.jpg" alt="Flower">
</div>
<div class="item">
<img src="img/f4.jpg" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-md-12 col-xs-12 text-center info-panel flower-sect">
<h2>Flowers</h2>
<p>Our Flowers are perfect for any occasion! We have a wide variety all year round, just be sure to call for availability! We can do prom flowers, funeral arrangements, and everything in between!</p>
</div>
<div class="col-md-12 col-xs-12 text-center info-panel gift-sect">
<h2>Gifts</h2>
<p>We have a wide variety of gifts available for purchase that range from wind chimes to <b>Decorative Vases.</b></p>
</div>
<div class="col-md-12 col-xs-12 text-center info-panel hour-sect">
<h2>Hours</h2>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
CSS
body {
font-family: 'News Cycle', sans-serif;
font-size: 175%;
}
li {
float: right;
text-align: left
}
link {
link
}
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #232323;
}
a:active {
text-decoration: underline;
color: #000000;
}
.main-section {
background-image: url(../img/back.jpg);
background-size: cover;
height: 1000px;
color: white;
}
.navbar {
position: fixed;
width: 100%;
}
.container-fluid {
padding-left: 0px;
}
.main {
padding: 400px 0px 360px 0px;
text-shadow: 1px black;
}
.nav {
float: right;
text-align: left;
font-size: 20px;
letter-spacing: .5px;
}
.headers-bfg {
padding-left: 35px;
}
.navbar-brand {
font-size: 20px;
letter-spacing: .5px;
}
h1 {
font-size: 70px;
}
h3 {
font-size: 35px;
}
.fa-circle {
color: gray;
font-size: .4em;
padding-top: 23px
}
.info-panel {
padding: 50px 50px 50px 50px;
}
.balloon-sect {
background-color: skyblue;
}
.flower-sect {
background-color: #f4f6f9;
}
.gift-sect {
background-color: #ce6640;
}
.carousel {
width:640px;
height:360px;
}
#myCarousel {
}
Not 100% sure this is what you want but you can take a look at this: http://www.bootply.com/t08I4ieD1s
Basically all I did was add: margin: 0 auto; to the .carousel css
.carousel {
width:640px;
height:360px;
margin: 0 auto;
}
and add:
.carousel-indicators{
width:auto;
margin: 0 auto;
}
To add space above and below you need to change the top and bottom margins. So for example you could do the following:
.carousel {
width:640px;
height:360px;
margin: 100px auto 50px auto;
}
This would add 100px above the carousel, and 50 below. Read here: http://www.w3schools.com/cssref/pr_margin.asp for more info.
Try this easy fix:
You can use bootstrap class .center-block to this line
<div id="myCarousel" class="carousel center slide" data-ride="carousel">
after adding class
<div id="myCarousel" class="carousel center-block center slide" data-ride="carousel">
bootstrap class .center-block make your element to the center horizontally with respect to its parent element.
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.
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;
}