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

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

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">

Related

Fade effect into a Bootstrap 3 carousel [duplicate]

This question already has answers here:
Bootstrap 3 Carousel fading to new slide instead of sliding to new slide
(9 answers)
Closed 5 years ago.
I am trying to make a carousel bootstrap with fade effect, but I am not so expert about this effect. I thought something like this css code
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
but i don't know how to apply it in my code.
This is my Carousel:
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
</ol>
<div class="carousel-inner">
<div class="item" style="">
<img src="images/slide/slide-1.jpg" alt="" class="" width="3000px" height="800px">
<div class="carousel-caption">
<h4 class="">First Slide Title</h4>
<p class="">
Description for First Slide, this First Slide.
</p>
</div>
</div>
<div class="item active">
<img src="images/slide/slide-2.jpg" alt="" class="" width="3000px" height="800px">
<div class="carousel-caption">
<h4 class="">Second Slide Title</h4>
<p class="">
Description for Second Slide, this is Second Slide.
</p>
</div>
</div>
<div class="item" style="">
<img src="images/slide/slide-3.jpg" alt="" class="" width="3000px" height="800px">
<div class="carousel-caption">
<h4 class="">Third Slide Title</h4>
<p class="">
Description for Third Slide, this is Third Slide.
</p>
</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>
and this is my custom.css:
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block;
height: 800px;
min-width: 100%;
width: 100%;
max-width: 100%;
line-height: 1;
}

I added the class carousel-fade and some custom css
See it in action: http://www.bootply.com/4kbsvxixnA
<div id="myCarousel" class="carousel slide carousel-fade">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
</ol>
<div class="carousel-inner">
<div class="item" style="">
<img src="https://placeholdit.imgix.net/~text?txtsize=128&bg=0099ff&txtclr=ffffff&txt=Blue&w=3000&h=800&fm=png" alt="" class="" width="3000px" height="800px">
<div class="carousel-caption">
<h4 class="">First Slide Title</h4>
<p class="">
Description for First Slide, this First Slide.
</p>
</div>
</div>
<div class="item active">
<img src="https://placeholdit.imgix.net/~text?txtsize=128&bg=ff33d6&txtclr=ffffff&txt=Pink&w=3000&h=800&fm=png" alt="" class="" width="3000px" height="800px">
<div class="carousel-caption">
<h4 class="">Second Slide Title</h4>
<p class="">
Description for Second Slide, this is Second Slide.
</p>
</div>
</div>
<div class="item" style="">
<img src="https://placeholdit.imgix.net/~text?txtsize=128&bg=97e345&txtclr=ffffff&txt=Green&w=3000&h=800&fm=png" alt="" class="" width="3000px" height="800px">
<div class="carousel-caption">
<h4 class="">Third Slide Title</h4>
<p class="">
Description for Third Slide, this is Third Slide.
</p>
</div>
</div>
</div>
CSS:
/* YOUR CSS simplified */
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block;
height: auto;
width: 100%;
line-height: 1;
}
/*Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
CSS from: http://codepen.io/transportedman/pen/NPWRGq
and: http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
Inspired from: http://codepen.io/Rowno/pen/Afykb*/
.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);
}
}

Add carousel-fade parent class to the
<div id="myCarousel" class="carousel slide carousel-fade">
and add the following css to your custom css stylesheet.
.carousel.carousel-fade .item {
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity:0;
}
.carousel.carousel-fade .active.item {
opacity:1;
}
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
left: 0;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
}
.carousel.carousel-fade .next,
.carousel.carousel-fade .prev {
left: 0;
z-index: 1;
}
.carousel.carousel-fade .carousel-control {
z-index: 3;
}
I have used dummy images from bootstrap to create a demo showing the
fade behavior.
.carousel.carousel-fade .item {
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity:0;
}
.carousel.carousel-fade .active.item {
opacity:1;
}
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
left: 0;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
}
.carousel.carousel-fade .next,
.carousel.carousel-fade .prev {
left: 0;
z-index: 1;
}
.carousel.carousel-fade .carousel-control {
z-index: 3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="myCarousel" class="carousel slide carousel-fade">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
<li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
</ol>
<div class="carousel-inner">
<div class="item" style="">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNTU1OiMzMzMvdGV4dDpUaGlyZCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE1YWZmOGY3Yjk1IHRleHQgeyBmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTVhZmY4ZjdiOTUiPjxyZWN0IHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNTU1Ii8+PGc+PHRleHQgeD0iMjk4LjMyMDMxMjUiIHk9IjI3MC4xIj5UaGlyZCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="" class="">
<div class="carousel-caption">
<h4 class="">First Slide Title</h4>
<p class="">
Description for First Slide, this First Slide.
</p>
</div>
</div>
<div class="item active">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNTU1OiMzMzMvdGV4dDpUaGlyZCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE1YWZmOGY3Yjk1IHRleHQgeyBmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTVhZmY4ZjdiOTUiPjxyZWN0IHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNTU1Ii8+PGc+PHRleHQgeD0iMjk4LjMyMDMxMjUiIHk9IjI3MC4xIj5UaGlyZCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="" class="">
<div class="carousel-caption">
<h4 class="">Second Slide Title</h4>
<p class="">
Description for Second Slide, this is Second Slide.
</p>
</div>
</div>
<div class="item" style="">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzkwMHg1MDAvYXV0by8jNTU1OiMzMzMvdGV4dDpUaGlyZCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE1YWZmOGY3Yjk1IHRleHQgeyBmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTVhZmY4ZjdiOTUiPjxyZWN0IHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjNTU1Ii8+PGc+PHRleHQgeD0iMjk4LjMyMDMxMjUiIHk9IjI3MC4xIj5UaGlyZCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="" class="" >
<div class="carousel-caption">
<h4 class="">Third Slide Title</h4>
<p class="">
Description for Third Slide, this is Third Slide.
</p>
</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>

How to fit carousel image on 17'' screens or more when the image in carousel are 1365 x 415 px?

I have built a website using bootstrap CSS and Javascript. And my main issue was to fit my images in carousel on every screen with a good ratio. So I came up with idea of resizing my image to 1365 x 415 pixels. The problem seems to be solved on all screens on 15" display and lower. But I recently, I tried to view my web site on a 17" or more screen display and the images in carousel did not fit the screen at all. So I would like to know what to do in order to fix this issue. Can anyone help?
Here is my code html code:
<!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>Home Page</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.navar-default {
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class = "wrapper">
<div class="container-fluid">
<nav class="navbar navar-default">
<div class="container-fluid">
<ul class = "topnav" id="myTopnav">
<li><a class="active" href= "index.html">ASK-Technology</a></li>
<li>Responsive Design</li>
<li>Sell</li>
<li>About</li>
<li class="float">☏ +8455481395 </li>
<li class="icon"> ☰</li>
</ul>
</div>
<div id="carousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="images/header1.jpg" alt="First slide image" class="center-block">
<div class="carousel-caption">
<h3>Electronic Repairs.</h3>
<p>Quickly, Fix your devices at low-cost.</p>
</div>
</div>
<div class="item"><img src="images/header2.jpg" alt="Second slide image" class="center-block">
<div class="carousel-caption">
<h3>Sell your Smartphones, and Electronics for Cash.</h3>
<p>A simpler process and better service.</p>
</div>
</div>
<div class="item"><img src="images/header3.png" alt="Third slide image" class="center-block">
<div class="carousel-caption">
<h3>Building a responsive web site has never been easier.</h3>
<p>Let's do great things together!</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel1" 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="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
<hr class = "lineBreak">
<footer class ="footerDesign">
<p align = "center">© Copyrights 2016 All Rights Reserved. Web Site Designed with ♥ by Ahmed Salim Kedote.</p>
</footer>
<aside class="socialMedia"></aside>
<script src="myscripts.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
Here is my bootstrap CSS code for carousel images:
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-inner > .item {
position: relative;
display: none;
-webkit-transition: .6s ease-in-out left;
-o-transition: .6s ease-in-out left;
transition: .6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
}
#media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner > .item {
-webkit-transition: -webkit-transform .6s ease-in-out;
-o-transition: -o-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
You can actually view the website on this link: ask-technology.com
If you need more info in order to help let me know. Thanks guys!

Add this at the end of your CSS:
.item img {
width: 100%;
}

this part
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
}
change max-width: 100%; to width: 100%;
but the image will increase base on width ratio that will make the slider higher.

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/

We Keep Coding

JavaScript is the programming language of the Web.

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

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">

Related

Fade effect into a Bootstrap 3 carousel [duplicate]

How to fit carousel image on 17'' screens or more when the image in carousel are 1365 x 415 px?

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

Vertically center the showing images on a fixed height Bootstrap carousel

Bootstrap carousel animate top to bottom instead of left to right

Categories

Resources