We Keep Coding

My Bootstrap Image Carousel is sort of sliding twice for each slide on Mobile devices

This is quite a difficult issue to explain without seeing it so I will include a link to where you can view the website so you can see for yourselves.
Basically, my Bootstrap image slide works perfectly on my desktop, however, when I view it on my iPhone X each slide sort of slides twice (or bounces?) for each transition.
It might be worth noting that it does NOT do this when I view it on an iPhone 7 (it works perfectly).
I cannot for the life of me work this out, and have tried researching it but appears no one has posted this same issue before...
It seems like an iPhone issue and hopefully the fact that it works on an iPhone 7 but not an iPhone X could help solve it?
Website Link
/* Jumbotron Carousel */
.preload {
display: none;
}
.carousel-inner .carousel-item {
transition: transform 0.4s ease, -webkit-transform 0.4s ease;
transition: transform 0.4s ease, -ms-transform 0.4s ease;
transition: transform 0.4s ease, -o-transform 0.4s ease;
transition: transform 0.4s ease, -moz-transform 0.4s ease;
}
.jumbotron .container {
height: 500px;
}
.carousel-inner {
width: 100%;
height: 450px;
}
.carousel-indicators:hover {
cursor: pointer;
}
.carousel-control-next {
height: 0;
top: 50%;
}
.carousel-control-prev {
height: 0;
top: 50%;
}
.carousel-control-prev-icon {
opacity: none;
}
.carousel-control-next-icon {
opacity: 2;
}
#slide1 {
background-color: black;
background-image: url(/images/home1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
#slide2 {
background-color: black;
background-image: url(/images/home2.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
#slide3 {
background-color: black;
background-image: url(/images/home3.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
.carousel-indicators {
bottom: -10%;
position: absolute;
}
#jumbo-btn {
background-color: #e4381C;
border-color: #e4381C;
}
<!-- Carousel -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="myslider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#myslider" data-slide-to="0" class="active"></li>
<li data-target="#myslider" data-slide-to="1"></li>
<li data-target="#myslider" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div id="slide1" class="jumbotron">
<div class="container">
<div class="row">
<div id="slide1-text" class=" col-md-6 col-sm-12">
<h1>text</h1>
<p>text</p>
<a id="jumbo-btn" class="btn btn-primary btn-sm" href="about.html" role="button">Learn more</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div id="slide2" class="jumbotron">
<div class="container">
<div class="row">
<div class=" col-md-6 col-sm-12">
<h1>text</h1>
<p>text</p>
<a id="jumbo-btn" class="btn btn-primary btn-sm" href="#" role="button">View Stock</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div id="slide3" class="jumbotron">
<div class="container">
<div class="row">
<div class=" col-md-6 col-sm-12">
<h1>text</h1>
<p>text</p>
<a id="jumbo-btn" class="btn btn-primary btn-sm" href="about.html" role="button">Learn more</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- The slideshow END -->
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myslider" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myslider" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<!-- Left and right controls END -->
</div>
<!-- Carousel END -->

Same bug on the latest version of bootstrap...
The content slide twice.
My workaround is to use a custom slide-fade affect explained here:
https://silvawebdesigns.com/how-to-change-the-bootstrap-4-carousel-to-a-fade-transition-instead-of-slide/

I believe this is related to the version of bootstrap 4 you are using if you upgrade to the latest version 4.5.2 this should solve the issue.

Bootstrap Carousel automatic functionality not working when mouse hovers over it?

My bootstrap carousel won't change slides when my mouse is hovering over the carousel, and idk why. I have this carousel playing in the background of my home page so it not moving when the mouse hovers kind of defeats it's purpose. I've included a fiddle and all relevant code, I really hope y'all can help because this is really weird.
https://jsfiddle.net/DTcHh/38996/
HTML:
<div id="carouselHacked" class="carousel slide carousel-fade" data-ride="carousel">
<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>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
<li data-target="#myCarousel" data-slide-to="6"></li>
<li data-target="#myCarousel" data-slide-to="7"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://i.imgur.com/qOho4rH.jpg" alt="">
</div>
<div class="item">
<img src="https://i.imgur.com/lSfzjbt.jpg" alt="">
</div>
<div class="item">
<img src="https://i.imgur.com/Xy8EhyE.jpg" alt="">
</div>
<div class="item">
<img src="https://i.imgur.com/A3FaoSG.jpg" alt="">
</div>
<div class="item">
<img src="https://i.imgur.com/wMcHybE.jpg" alt="">
</div>
<div class="item">
<img src="https://i.imgur.com/vadYihW.jpg" alt="">
</div>
<div class="item">
<img src="https://i.imgur.com/EaSLrXs.jpg" alt="">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carouselHacked" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carouselHacked" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS:
body{
margin:0;
overflow-x: hidden;
font-family: Calibri;
font-style: normal;
font-variant: normal;
}
.carousel-fade .carousel-inner .item {
opacity: 0;
transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
}
/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
Need to override the 3.3 new styles for modern browsers & apply opacity
*/
#media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

This is the default behaviour of the bootstrap carousel. Look at their options in the documentation
Set data-pause="null" to disable this behaviour.
ex:
<div id="carouselHacked" class="carousel slide carousel-fade" data-ride="carousel" data-pause="null">

How to create a Bootstrap carousel with different set up depending of the screen size?

I have the following problem.
I am working with a bootstrap carousel which I would like to do the following.
When the screen is between MD and LG size I would like to have 3 items with 2 elements in row inside (image a). However when the screen resizes to SM and XS I would to have 6 items with 1 element in each item. (image B)
I don’t know how to make it, and if it is possible.
ATM I am thinking to create 2 different carousels one for LG and MD and other for only SM XS and with #media queries show the carousel A or B. But my client wants just 1 carousel because he needs to use his data base on it, and if he has 2 different carousels that will mean more work for him.
Any advice will be very welcome.
PS: I have attached an image and example of code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Affiliate marketing network delivering high quality affiliate programs for email marketing affiliates in the UK">
<meta name="Keywords" content="the affiliate people, affiliate people, affiliate marketing, affiliate network, affiliate programs, affiliate, affiliate program, affiliate marketing network, email markerting affiliates, email affiliate programs">
<meta name="robots" content="index,follow">
<title>
test</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Css -->
<link rel="stylesheet" type="text/css" href="TAP_css.css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="animate.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="TAP_js.js"></script>
<style>
body,td,th {
font-family: "Open Sans";
font-size: 16px;
color: #555;
background-color: #fff;
}
</style>
</head>
<body>
<!-- Reviews -->
<div class="rev_bg" id="test_bg">
<div class="container">
<div class="row">
<h3 class="rev_h3" id="test_h3"> TESTIMONIALS </h3>
<p class="rev_t">Our clients and affiliates thoughts about us.
Read more <span> The test teste testimonials </span></p>
<hr class="rev_hr">
</div>
</div>
<!-- CAROUSEL REV -->
<div class="container rev_carousel ">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators rev_in20">
<li data-target="#myCarousel" data-slide-to="0" class="active rev_bg1"></li>
<li data-target="#myCarousel" data-slide-to="1" class="rev_bg1"></li>
<li class="rev_bg1" 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-md-6">1A TEST </div>
<div class="col-md-6">1B TEST </div>
</div>
</div>
<div class="item">2 </div>
<div class="item">3 </div>
<div class="item">4 </div>
<div class="item">5 </div>
<div class="item">6 </div>
</div>
<!-- Left and right controls -->
<a class="nobackground" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left rev_c_lef" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right nobackground " href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right rev_c_rig" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!--- END CAROUSEL REV -->
</div>
<!-- E Reviews -->
</body>
</html>

Try this
CSS
.carousel-showsixmoveone .carousel-control {
width: 4%;
background-image: none;
}
.carousel-showsixmoveone .carousel-control.left {
margin-left: 15px;
}
.carousel-showsixmoveone .carousel-control.right {
margin-right: 15px;
}
.carousel-showsixmoveone .cloneditem-1,
.carousel-showsixmoveone .cloneditem-2,
.carousel-showsixmoveone .cloneditem-3,
.carousel-showsixmoveone .cloneditem-4,
.carousel-showsixmoveone .cloneditem-5 {
display: none;
}
#media all and (min-width: 768px) {
.carousel-showsixmoveone .carousel-inner > .active.left,
.carousel-showsixmoveone .carousel-inner > .prev {
left: -50%;
}
.carousel-showsixmoveone .carousel-inner > .active.right,
.carousel-showsixmoveone .carousel-inner > .next {
left: 50%;
}
.carousel-showsixmoveone .carousel-inner > .left,
.carousel-showsixmoveone .carousel-inner > .prev.right,
.carousel-showsixmoveone .carousel-inner > .active {
left: 0;
}
.carousel-showsixmoveone .carousel-inner .cloneditem-1,
.carousel-showsixmoveone .carousel-inner .cloneditem-2 {
display: block;
}
}
#media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
.carousel-showsixmoveone .carousel-inner > .item.active.right,
.carousel-showsixmoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
left: 0;
}
.carousel-showsixmoveone .carousel-inner > .item.active.left,
.carousel-showsixmoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
left: 0;
}
.carousel-showsixmoveone .carousel-inner > .item.left,
.carousel-showsixmoveone .carousel-inner > .item.prev.right,
.carousel-showsixmoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
#media all and (min-width: 992px) {
.carousel-showsixmoveone .carousel-inner > .active.left,
.carousel-showsixmoveone .carousel-inner > .prev {
left: -50%;
}
.carousel-showsixmoveone .carousel-inner > .active.right,
.carousel-showsixmoveone .carousel-inner > .next {
left: 50%;
}
.carousel-showsixmoveone .carousel-inner > .left,
.carousel-showsixmoveone .carousel-inner > .prev.right,
.carousel-showsixmoveone .carousel-inner > .active {
left: 0;
}
.carousel-showsixmoveone .carousel-inner .cloneditem-3,
.carousel-showsixmoveone .carousel-inner .cloneditem-4,
.carousel-showsixmoveone .carousel-inner .cloneditem-5 {
display: block;
}
}
#media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {
.carousel-showsixmoveone .carousel-inner > .item.active.right,
.carousel-showsixmoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
left: 0;
}
.carousel-showsixmoveone .carousel-inner > .item.active.left,
.carousel-showsixmoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
left: 0;
}
.carousel-showsixmoveone .carousel-inner > .item.left,
.carousel-showsixmoveone .carousel-inner > .item.prev.right,
.carousel-showsixmoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
.container {
margin-top: 50px;
}
body {
font-family: 'Bitter', sans-serif;
color: #E54A41;
background-image: url('//static.rtpdesign.co.uk/blog/img/background.png');
background-repeat: no-repeat;
background-position: right top;
background-size: 20%;
}
p {
font-family: 'Open Sans', sans-serif;
color: #333;
margin-bottom: 2em;
}
JS
(function(){
$('#carousel123').carousel({ interval: false });
}());
(function(){
$('.carousel-showsixmoveone .item').each(function(){
var itemToClone = $(this);
for (var i=1;i<2;i++) {
itemToClone = itemToClone.next();
// wrap around if at end of item collection
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
// grab item, clone, add marker class, add to collection
itemToClone.children(':first-child').clone()
.addClass("cloneditem-"+(i))
.appendTo($(this));
}
});
}());
HTML
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel carousel-showsixmoveone slide" id="carousel123">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-12 col-md-6"><img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-12 col-md-6"><img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-12 col-md-6"><img src="http://placehold.it/500/d6d6d6/333&text=3" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-12 col-md-6"><img src="http://placehold.it/500/002040/eeeeee&text=4" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-12 col-md-6"><img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-12 col-md-6"><img src="http://placehold.it/500/002d5a/fff/&text=6" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-12 col-md-6"><img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-12 col-md-6"><img src="http://placehold.it/500/40a1ff/002040&text=8" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
https://jsfiddle.net/dolphine/t344h8k6/1/

Just create a carousel with slides and put two div elements in each slide. First div visible at small viewport containing one image, second div visible in bigger viewport size containing two images.
Pseudo code:
<carousel>
<slide>
<wrapper visible at mobile>
<image />
</wrapper visible at mobile>
<wrapper visible at desktop>
<image />
<image />
</wrapper visible at desktop>
</slide>
...
</carousel>
It's not perfect: The to be displayed images need to be a multiple of 2. The mobile viewport carousel will contain double the items needed.
This is no problem if you hide the slide indicators on mobile.

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

Bootstrap carousel animate top to bottom instead of left to right

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/