Change Bootstrap Carousel Animation Duration Using Cubic Bizer

Change Bootstrap Carousel Animation Duration Using Cubic Bizer - javascript

Hello People I Work On Change Bootstrap Slides Animation Direction and I Tried To Change My Bootstrap Carousel Slides Animation But There Are Some Problems:
#media all and (transform-3d),
(-webkit-transform-3d) {
#my-carousel > .carousel-inner > .item {
-webkit-transition-property: -webkit-transform;
transition-property: transform;
}
#my-carousel > .carousel-inner > .item.next,
#my-carousel > .carousel-inner > .item.active.right {
top: 0;
left: auto;
/*default Of Bootstrap Left: 0*/
transform: translate3d(0, 100%, 0);
}
#my-carousel > .carousel-inner > .item.prev,
#my-carousel > .carousel-inner > .item.active.left {
top: 0;
transform: translate3d(0, -100%, 0);
}
#my-carousel > .carousel-inner > .item.next.left,
#my-carousel > .carousel-inner > .item.prev.right,
#my-carousel > .carousel-inner > .item.active {
top: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#my-carousel > .carousel-inner > .active {
top: 0;
}
#my-carousel > .carousel-inner > .next,
#my-carousel > .carousel-inner > .prev {
top: 0;
width: auto;
height: 100%;
}
#my-carousel > .carousel-inner > .next {
left: 0;
top: 100%;
}
#my-carousel > .carousel-inner > .prev {
left: 0;
top: -100%
}
#my-carousel > .carousel-inner > .next.left,
#my-carousel > .carousel-inner > .prev.right {
top: 0;
}
#my-carousel > .carousel-inner > .active.left {
left: 0;
top: -100%;
}
#my-carousel > .carousel-inner > .active.right {
left: 0;
top: 100%;
}
/*Animation Cubic Bizer*/
#my-carousel .carousel-inner > .item {
transition-timing-function: cubic-bezier(.24,1.01,.3,.53);
transition: 4s ease-in-out top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="40000" data-duration="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-carousel" data-slide-to="0" class="active"></li>
<li data-target="#my-carousel" data-slide-to="1"></li>
<li data-target="#my-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img alt="First slide" src="http://store6.up-00.com/2017-01/148549717954391.jpg">
<div class="carousel-caption">
<h3>Caption heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img alt="Second slide" src="http://store6.up-00.com/2017-01/148549717968642.jpg">
<div class="carousel-caption">
<h3>Caption heading 2</h3>
<p>Morbi eget libero quis metus consectetur semper.</p>
</div>
</div>
<div class="item">
<img alt="Third slide" src="http://store6.up-00.com/2017-01/148549717985113.jpg">
<div class="carousel-caption">
<h3>Caption heading 3</h3>
<p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#my-carousel" 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="#my-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Note: Please Run Code Snippet In Full Screen

You just need to remove this code:
transition: 4s ease-in-out top;
and make item like this:
#my-carousel .carousel-inner > .item {
transition-timing-function: cubic-bezier(.23,1,.32,1);
transition: 4s ease-in-out top;
}
Also you need to change carousel.Constructor.TRANSITION_DURATION:
First you must get data-duration value using jQuery data() function:
var itemDurVal = $(".carousel").data("duration");
/*get data-duration value of my carousel */
Then you can change slides animation:
That synchronize transition and prevent slide to disappear before transition ends.
$.fn.carousel.Constructor.TRANSITION_DURATION = itemDurVal;
And .item transition-duration value must equal carousel.Constructor.TRANSITION_DURATION value:
$(".carousel-inner .item").css({
'-webkit-transition-duration': itemDurVal + 'ms',
'-moz-transition-duration': itemDurVal + 'ms',
'transition-duration': itemDurVal + 'ms'
});
Full code is here:
var itemDurVal = $(".carousel").data("duration"); /*get data-duration value of my carousel */
$.fn.carousel.Constructor.TRANSITION_DURATION = itemDurVal;
$(".carousel-inner .item").css({
'-webkit-transition-duration': itemDurVal + 'ms',
'-moz-transition-duration': itemDurVal + 'ms',
'transition-duration': itemDurVal + 'ms'
});
#media all and (transform-3d),
(-webkit-transform-3d) {
#my-carousel > .carousel-inner > .item {
-webkit-transition-property: -webkit-transform;
transition-property: transform;
}
#my-carousel > .carousel-inner > .item.next,
#my-carousel > .carousel-inner > .item.active.right {
top: 0;
left: auto;
/*default Of Bootstrap Left: 0*/
transform: translate3d(0, 100%, 0);
}
#my-carousel > .carousel-inner > .item.prev,
#my-carousel > .carousel-inner > .item.active.left {
top: 0;
transform: translate3d(0, -100%, 0);
}
#my-carousel > .carousel-inner > .item.next.left,
#my-carousel > .carousel-inner > .item.prev.right,
#my-carousel > .carousel-inner > .item.active {
top: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#my-carousel > .carousel-inner > .active {
top: 0;
}
#my-carousel > .carousel-inner > .next,
#my-carousel > .carousel-inner > .prev {
top: 0;
width: auto;
height: 100%;
}
#my-carousel > .carousel-inner > .next {
left: 0;
top: 100%;
}
#my-carousel > .carousel-inner > .prev {
left: 0;
top: -100%
}
#my-carousel > .carousel-inner > .next.left,
#my-carousel > .carousel-inner > .prev.right {
top: 0;
}
#my-carousel > .carousel-inner > .active.left {
left: 0;
top: -100%;
}
#my-carousel > .carousel-inner > .active.right {
left: 0;
top: 100%;
}
/*Animation Cubic Bizer*/
#my-carousel .carousel-inner > .item {
transition-timing-function: cubic-bezier(.24,1.01,.3,.53);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="40000" data-duration="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-carousel" data-slide-to="0" class="active"></li>
<li data-target="#my-carousel" data-slide-to="1"></li>
<li data-target="#my-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img alt="First slide" src="http://store6.up-00.com/2017-01/148549717954391.jpg">
<div class="carousel-caption">
<h3>Caption heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img alt="Second slide" src="http://store6.up-00.com/2017-01/148549717968642.jpg">
<div class="carousel-caption">
<h3>Caption heading 2</h3>
<p>Morbi eget libero quis metus consectetur semper.</p>
</div>
</div>
<div class="item">
<img alt="Third slide" src="http://store6.up-00.com/2017-01/148549717985113.jpg">
<div class="carousel-caption">
<h3>Caption heading 3</h3>
<p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#my-carousel" 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="#my-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Have you tried to delete the CSS? You will get the CSS from bootstrap automatically.
If you want to override Bootstraps CSS try to put !important after the line in CSS.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="40000" data-duration="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-carousel" data-slide-to="0" class="active"></li>
<li data-target="#my-carousel" data-slide-to="1"></li>
<li data-target="#my-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img alt="First slide" src="http://store6.up-00.com/2017-01/148549717954391.jpg">
<div class="carousel-caption">
<h3>Caption heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img alt="Second slide" src="http://store6.up-00.com/2017-01/148549717968642.jpg">
<div class="carousel-caption">
<h3>Caption heading 2</h3>
<p>Morbi eget libero quis metus consectetur semper.</p>
</div>
</div>
<div class="item">
<img alt="Third slide" src="http://store6.up-00.com/2017-01/148549717985113.jpg">
<div class="carousel-caption">
<h3>Caption heading 3</h3>
<p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#my-carousel" 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="#my-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Related

Carousel Bootstrap 5: JQuery to Javascript

I need a bootstrap 5 carousel, showing multiple items and slide one at time. All I need is to translate the Jquery code to pure Javascript. Then I could remove the jquery dependency. I found this solution does the job,
is light, and understandable. So it’s exactly what I need, except it has Jquery depencendy. DEMO
FULL CODE
$('.carousel .carousel-item').each(function() {
var minPerSlide = 4;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < minPerSlide; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
#media (min-width: 768px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(50%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-50%);
}
}
#media (min-width: 992px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33%);
}
}
#media (max-width: 768px) {
.carousel-inner .carousel-item>div {
display: none;
}
.carousel-inner .carousel-item>div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
transform: translateX(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css">
<div class="container text-center">
<div class="row mx-auto my-auto">
<div id="myCarousel" class="carousel slide carousel-dark w-100" data-bs-ride="carousel" data-bs-interval="2000">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="http://placehold.it/350x180?text=1">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="http://placehold.it/350x180?text=2">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="http://placehold.it/350x180?text=3">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="http://placehold.it/350x180?text=4">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="http://placehold.it/350x180?text=5">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="http://placehold.it/350x180?text=6">
</div>
</div>
</div>
<a class="carousel-control-prev bg-dark w-auto" href="#myCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next bg-dark w-auto" href="#myCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>

Converted version
const minPerSlide = 4;
const parent = document.querySelector(".carousel-inner");
document.querySelectorAll('.carousel-item').forEach(function(item) {
let next = item.nextElementSibling;
if (!next) {
next = parent.querySelector(".carousel-item");
}
let clone = next.querySelector("div").cloneNode(true);
item.appendChild(clone)
for (var i = 0; i < minPerSlide; i++) {
next = next.nextElementSibling;
if (!next) {
next = parent.querySelector(".carousel-item");
}
clone = next.querySelector("div").cloneNode(true);
item.appendChild(clone)
}
});
#media (min-width: 768px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(50%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-50%);
}
}
#media (min-width: 992px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33%);
}
}
#media (max-width: 768px) {
.carousel-inner .carousel-item>div {
display: none;
}
.carousel-inner .carousel-item>div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
transform: translateX(0);
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css">
<div class="container text-center">
<div class="row mx-auto my-auto">
<div id="myCarousel" class="carousel slide carousel-dark w-100" data-bs-ride="carousel" data-bs-interval="2000">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="https://via.placeholder.com/350x180?text=1">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="https://via.placeholder.com/350x180?text=2">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="https://via.placeholder.com/350x180?text=3">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="https://via.placeholder.com/350x180?text=4">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="https://via.placeholder.com/350x180?text=5">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="https://via.placeholder.com/350x180?text=6">
</div>
</div>
</div>
<a class="carousel-control-prev bg-dark w-auto" href="#myCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next bg-dark w-auto" href="#myCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>

Bootstrap nested carousels active controls

I have a problem with Bootstrap nested carousels;
On click of the intern carousel it changes also the the active li of the extern carousel, which ist not correct.
Also on click on the extern carousel controls, the intern carousel don't work any more.
Can anyone help?
$('#custom_carousel').on('slide.bs.carousel', function (evt) {
$('#custom_carousel > .controls li.active').removeClass('active');
$('#custom_carousel > .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
});
$('#intern_carousel').on('slide.bs.carousel', function (evt) {
$('#intern_carousel > .controls .active').closest('li').removeClass('active');
$('#intern_carousel > .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
});
.jumbotron.carousel-slider, .slider-cont > .row > div { padding: 0; }
.jumbotron .img-responsive { margin-bottom: 15px; }
.slider-cont {
max-width: 100% !important;
width: 100% !important;
padding: 0;
}
/* Override default Bootstrap classes */
.carousel-inner { font-size: 12px; }
.carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img {
width: 100% !important;
}
#custom_carousel .carousel-inner > .item > a > img, #custom_carousel .carousel-inner > .item > img,
#custom_carousel .img-responsive, #custom_carousel .thumbnail a > img, #custom_carousel .thumbnail > img {
width: 100% !important;
}
.slider-cont > .row { margin: 0; }
#custom_carousel .carousel-control .glyphicon-menu-left, #custom_carousel .carousel-control .glyphicon-menu-right { top: 45%; right: 50%; font-size: 36px; position: inherit; }
/*#custom_carousel .carousel-control { border: 2px solid red; }*/
#custom_carousel .item {
color:#000;
background-color:#eee;
}
#custom_carousel .controls{
overflow-x: auto;
overflow-y: hidden;
padding:0;
margin:0;
white-space: nowrap;
text-align: center;
position: relative;
background:#ddd;
}
#custom_carousel .controls li {
display: table-cell;
width: 1%;
max-width:90px;
/*background-color: rgb(234,234,234); opacity: 0.2;*/
}
#custom_carousel .controls li.active {
border-top:3px solid #e53d20;
position: relative;
}
#custom_carousel li.active a { font-weight: bold; }
#custom_carousel img { margin: 0; }
#custom_carousel .controls > .nav a {
color: #6e6e6e;
font-size: 16px;
/*font-weight: 400;*/
padding: 18px 15px;
}
/* ******************* BEGIN Interne Carousels ******************* */
.interne-carousel {
background-color: #ffff00;
bottom: 142px;
height: 150px;
left: 0;
margin: 0 auto;
padding: 0;
position: absolute;
right: 0;
width: 500px;
}
#intern_carousel {
width: 500px;
left: 0;
margin: 0 auto;
padding: 0;
}
#intern_carousel .item { text-align: center; }
#intern_carousel img { border: 2px #a29e9e solid; }
#intern_carousel .controls li.active img { border: 2px red solid; }
#intern_carousel .carousel-control { color: red; background: none; }
#intern_carousel .controls li.active, #intern_carousel .controls li.active {
border-top: 3px solid yellowgreen;
position: relative;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron carousel-slider">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12">
<!-- Begin Carousel -->
<div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="2500">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/672x301/cccccc/ffffff" alt="Slide" class="img-responsive">
<div class="interne-carousel">
#####!!! interne-carousel !!!#####
<!-- Begin Interne Carousel -->
<div id="intern_carousel" class="carousel slide" data-ride="carousel" data-interval="2500">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12">
<h3>Lorem Ipsum 1</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invid.
</div>
</div>
</div>
</div>
<div class="item">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12">
<h3>Lorem Ipsum 2</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invid.
</div>
</div>
</div>
</div>
<div class="item">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12">
<h3>Lorem Ipsum 3</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invid.
</div>
</div>
</div>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
<a class="left carousel-control" href="#intern_carousel" data-slide="prev"><span
class="glyphicon glyphicon-menu-left"></span></a>
<a class="right carousel-control" href="#intern_carousel" data-slide="next"><span
class="glyphicon glyphicon-menu-right"></span></a>
<div class="controls">
<ul class="nav">
<li data-target="#intern_carousel" data-slide-to="0" class="active">
<img src="http://placehold.it/75x44/cccccc/ffffff" alt=""/>
</li>
<li data-target="#intern_carousel" data-slide-to="1">
<img src="http://placehold.it/75x44/999999/cccccc" alt=""/>
</li>
<li data-target="#intern_carousel" data-slide-to="2">
<img src="http://placehold.it/75x44/cccccc/ffffff" alt=""/>
</li>
</ul>
</div>
</div>
<!-- End Interne Carousel -->
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/672x301/ffffff/cccccc" alt="Slide" class="img-responsive"></div>
</div>
</div>
</div>
<div class="item">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/672x301/cccccc/ffffff" alt="Slide" class="img-responsive"></div>
</div>
</div>
</div>
<div class="item">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/672x301/ffffff/cccccc" alt="Slide" class="img-responsive"></div>
</div>
</div>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
<a class="left carousel-control" href="#custom_carousel" data-slide="prev"><span
class="glyphicon glyphicon-menu-left"></span></a>
<a class="right carousel-control" href="#custom_carousel" data-slide="next"><span
class="glyphicon glyphicon-menu-right"></span></a>
<div class="controls">
<ul class="nav">
<li data-target="#custom_carousel" data-slide-to="0" class="active">
Lorem Ipsum
</li>
<li data-target="#custom_carousel" data-slide-to="1">
Sed ut perspiciatis
</li>
<li data-target="#custom_carousel" data-slide-to="2">
Lorem Ipsum
</li>
<li data-target="#custom_carousel" data-slide-to="3">
Sed ut perspiciatis
</li>
</ul>
</div>
</div>
<!-- End Carousel -->
</div>
</div>
</div>
</div>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

basically, nested carousel is not supported, find more information on github
But you can try for some workaround (worked for me), like an example below (i'm using jquery), where i will temporarily change the "active" class of item insides child-carousel(s). And add it back after the event on parent carouse has completed
btn.on("click", function () {
/*
Fix for Nested Carousel:
Before any sliding action, need to "hide" inner carouse active items
After sliding action, update active items again
*/
$.each(carourselInnerHolder.find(".child-carousel.active"), function (i, item) {
$(item).removeClass("active").addClass("active-fix-nested");
});
setTimeout(function() {
Metronic.unblockUI(); //blockUI to avoid multiple actions immediately
}, 200);
carouselHolder.carousel(carouselIndex); // action that trigger update parent Carousel to slide to new item with this index
$.each(carourselInnerHolder.find(".child-carousel.active-fix-nested"), function (i, item) {
$(item).addClass("active").removeClass("active-fix-nested");
});
/*
END Fix for Nested Carousel
*/
});

3-columns carousel slider black and white centered image

I use the following carousel slider and I want left and right image to be black & white except from centered image. I have to use the following css3: -webkit-filter: grayscale(100%); filter: grayscale(100%);
Where should I write it?
<div class="container-fluid"> <!-- "container-fluid" -->
<div class="row">
<div class="col-md-12 center-block">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="../images/01.jpg" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="../images/02.jpg" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="../images/03.jpg" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev" style=""><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div> <!-- row -->
</div> <!-- container fluid -->
<script>
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 10000
})
$('.carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
</script>
<style>
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 150%;
left: -25%;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.carousel-control.left, .carousel-control.right {
background: rgba(255, 255, 255, 0.3);
width: 25%;
}
</style>

Try to add:
.item > div:first-child img,
.item > div:last-child img {
-webkit-filter: grayscale(100%); filter: grayscale(100%);
}
Test the result:
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 10000
})
$('.carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 150%;
left: -25%;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.carousel-control.left, .carousel-control.right {
background: rgba(255, 255, 255, 0.3);
width: 25%;
}
.item > div:first-child img,
.item > div:last-child img {
-webkit-filter: grayscale(100%); filter: grayscale(100%);
}
<div class="container-fluid"> <!-- "container-fluid" -->
<div class="row">
<div class="col-md-12 center-block">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev" style=""><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div> <!-- row -->
</div> <!-- container fluid -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

getting previous and next photos to show up in bootstrap carousel

Image of my carousel:
Hey guys, I'm trying to get my previous/next photos in my carousel to be edge (so you can see three photos, but only half of the first and third photo) to edge with a 10px gap in between. Can't find a way to do this. I've gotten as far as setting the height of the carousel and centering the image. Now if I could just get the other images to slide up next to the displayed image!
Thank you guys!
<script>
$(document).ready(function() {
$('#carousel-example-generic').carousel({
interval: 10000
})
$('.carousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
</script>
.carousel-inner {
height: 515px;
}
.item {
height: 515px;
}
.carousel-inner .item img {
position: relative;
top: 50%;
transform: translateY(-50%);
height: 515px;
margin: 0 auto;
}
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 150%;
left: -25%;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.carousel-control.left,
.carousel-control.right {
background: rgba(255, 255, 255, 0.3);
width: 20%;
}
<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="assets/img/carousel-1.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="assets/img/carousel-2.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="assets/img/carousel-3.jpg" alt="...">
<div class="carousel-caption">
</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>

Jquery / Bootstrap 3 Slider (Moving individual items)

JSFiddle of Problem
I have a slider that i picked off another post which had a very similar question. The aim of the slider was to have multiple elements on screen at once, rather than one. These would then move one by one off screen, being replaced by another.
Example
1 - 2 - 3 - 4 - 5 - 6 >>> 2 - 3 - 4 - 5 - 6 - 7 >>> 3 - 4 - 5 - 6 - 7 - 8
Currently, the slider moves the entire row at once, rather than just sliding one to the right / left. Any help would be appreciated.
Thanks
html:
<!DOCTYPE html>
<html>
<head>
<title> Spotlight Productions </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="icon" type="image/png" href="img/favicon2.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,500,800,700,600,200' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<link href = "css/styles.css" rel = "stylesheet">
</head>
<body style = "background-color: green">
<div class="col-sm-12">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-2"><img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-sm-2"><img src="http://placehold.it/500/e477e4/fff&text=2" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-sm-2"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-sm-2"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-sm-2"><img src="http://placehold.it/500/f566f5/333&text=5" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-sm-2"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-sm-2"><img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-sm-2"><img src="http://placehold.it/500/fcfcfc/333&text=8" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</body>
</html>
CSS
/** Client Slider **/
.carousel-inner .active.left { left: -16%; }
.carousel-inner .next { left: 16%; }
.carousel-control.left,.carousel-control.right {background-image:none;}
.col-sm-2 {width: 16%;}
Javascript
$(document).ready(function(){
$('#myCarousel').carousel({
interval: 2000
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<4;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
});

You started your CSS the right way but missed some "100%" appearances. So everywhere bootstrap uses a "100%" positioning or transformation you just replace it with your "16%":
/** Client Slider **/
.carousel-control.left,.carousel-control.right {background-image:none;}
.col-sm-2 {width: 16%;}
#media all and (transform-3d), (-webkit-transform-3d) {
#myCarousel .carousel-inner > .item.next,
#myCarousel .carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(16%, 0, 0);
transform: translate3d(16%, 0, 0);
}
#myCarousel .carousel-inner > .item.prev,
#myCarousel .carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-16%, 0, 0);
transform: translate3d(-16%, 0, 0);
}
#myCarousel .carousel-inner > .item.next.left,
#myCarousel .carousel-inner > .item.prev.right,
#myCarousel .carousel-inner > .item.active {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#myCarousel .carousel-inner > .active {
left: 0;
}
#myCarousel .carousel-inner > .next {
left: 16%;
}
#myCarousel .carousel-inner > .prev {
left: -16%;
}
#myCarousel .carousel-inner > .next.left,
#myCarousel .carousel-inner > .prev.right {
left: 0;
}
#myCarousel .carousel-inner > .active.left {
left: -16%;
}
#myCarousel .carousel-inner > .active.right {
left: 16%;
}
The updated fiddle

Develop Reference

JavaScript is the programming language of the Web.

Change Bootstrap Carousel Animation Duration Using Cubic Bizer - javascript

Related

Carousel Bootstrap 5: JQuery to Javascript

Bootstrap nested carousels active controls

3-columns carousel slider black and white centered image

getting previous and next photos to show up in bootstrap carousel

Jquery / Bootstrap 3 Slider (Moving individual items)

Categories

Resources