The popular carousel plugin of Bootstrap has been used on many websites. The jQuery plugin itself uses CSS class from the Less code of Bootstrap. So you can not change the classes names use for the carousel structure (without changing the plugin too).
In most situations you will not change the original source code of Bootstrap, to make easy updating possible.
In stead of changing the class name you can add an additional class to bind new animations to the carousel.
An example can be found at: http://www.bootply.com/Tbey4dxan1
For the example above i have add a anim class to the div with the role="listbox" as follows:
<div class=”carousel-inner anim” role=”listbox”>
After that i can use the carousel-inner anim in the Less code for my alternative animations. The carousel-inner anim selector automatically got a higher specificity than the original carousel-inner selector.
For the demonstration i have use two animations from Animate.css. The Less code for the flip animation will look like that shown below:
@keyframes flip {
0% {
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
animation-timing-function: ease-out;
}40% {
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
animation-timing-function: ease-out;
}50% {
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
animation-timing-function: ease-in;
}80% {
transform: perspective(400px) scale3d(.95, .95, .95);
animation-timing-function: ease-in;
}100% {
transform: perspective(400px);
animation-timing-function: ease-in;
}
}.flip {
backface-visibility: visible;
animation-name: flip;
animation-duration: 0.6s;
}
I have add the animation-duration property into the .flip selector, which can be used as mixin now. Notice that CSS animation require some vendor prefixes for cross browser compatibility. I do not use vendor prefixes in my Less code but run an autoprefixer afterwards leveraging the Less Autoprefix plugin. After creating the Less code for the animation, i will create the Less code carousel-inner anim selector, which will look as follows:
.carousel-inner.anim {
> .active {
left: 0;
}> .next,
> .prev {
position: absolute;
top: 0;
width: 100%;
}> .next.left {
.flip();
left: 0;
}
> .prev.right {
.rotateInDownLeft();
left: 0;
}
> .active.left {
left: -100%;
}
> .active.right {
left: 100%;
}
}
I also found some related questions on Stack Overflow;
http://stackoverflow.com/questions/26770055/bootstrap-carousel-fade-no-longer-working-with-maxcdn-3-3-bootstrap-min-css and http://stackoverflow.com/questions/27626096/bootstrap-carousel-fade-not-working-on-images-need-help-understanding-why.
I have tested the above solutions on both Chrome and Firefox. In some situations (or for some browsers) you should possible also reset the original transitions. You could try to do this reset by using the following Less code:
.carousel-inner {
> .item {
transition: none;// WebKit CSS3 transforms for supported devices
@media all and (transform-3d), (-webkit-transform-3d) {
transition: none;
backface-visibility: hidden;
perspective: 1000;&.next,
&.active.right {
transform: none;
left: 0;
}
&.prev,
&.active.left {
transform: none;
left: 0;
}
&.next.left,
&.prev.right,
&.active {
transform: none;
left: 0;
}
}}
}
Howto smoothly fade in your slides
For fade-out and fade-in effect, your slides should be stacked (using position absolute). An demo can be found here. For a more detailed explanation you should read my answer at stackoverflow: Bootstrap carousel refuses to transition smoothly after css adjustments. This example will also show you that the Bootstrap 3d-translations can indeed easily be reset by using the following Less code:
.carousel-inner > .item {
transform: translate3d(0,0,0) !important;
}