I am trying to create a fade transition carousel for my website created with Bootstrap and AngularJS. I have created the effect but I keep getting this flash to white between each slide instead of a nice fade over the previous image. You can see an example of it here now (until the question is answered or I fix it up):
http://development.artlyticalmedia.com/portfolio
I am using UI Bootstrap because it makes Bootstrap play nice with AngularJS, which already makes most of the solutions out there inaccurate because my html looks like this:
<div class="container-fluid text-center" ng-controller="PortfolioCtrl" id="portfolio">
<carousel interval="interval" class="carousel-fade">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" alt="{{slide.alt}}">
</slide>
</carousel>
</div>
Notice that the <carousel>
element is not present in a standard Bootstrap carousel; I believe it is a <div class="carousel">
. My SCSS, which ought to give the correct effect, looks like this:
.carousel-fade {
.carousel-inner {
.item {
transition-property: opacity;
transition-duration: 1s;
opacity: 0;
}
.active {
opacity: 1;
}
.active.left,
.active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.next.left,
.prev.right {
opacity: 1;
}
}
.carousel-control {
z-index: 2;
}
}
My Javascript is pretty standard, except that I disable $animate
because this was a fix I had to implement before. Here it is anyways:
angular.module('comartlyticalmediawwwApp')
.controller('PortfolioCtrl', function ($scope, $animate) {
$scope.interval = 3000;
$animate.enabled(false);
$scope.animate = null;
$scope.animateGlobal = true;
$scope.slides = [
{
image: 'images/portfolio/websites/3dsailing-Home.png',
alt: 'plan'
},
{
image: 'images/portfolio/websites/3dsailing-SailCoachPro.png',
alt: 'act'
},
{
image: 'images/portfolio/websites/3dsailing-3D-Printing.png',
alt: 'done'
},
{
image: 'images/portfolio/websites/Glass-Planner-Home.png',
alt: 'done'
},
{
image: 'images/portfolio/websites/Glass-Planner-PlanActDone.png',
alt: 'done'
},
{
image: 'images/portfolio/websites/Glass-Planner-Tutorials.png',
alt: 'done'
}];
});
After having this problem for some hours I finally discovered that transform: translate3d() is the reason we both had this problem.
Try to use this code:
.carousel-fade {
.carousel-inner {
.item {
opacity: 0;
-webkit-transition-property: opacity;
transition-property: opacity;
}
.active {
opacity: 1;
}
.active.left,
.active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.next.left,
.prev.right {
opacity: 1;
}
}
.carousel-control {
z-index: 2;
}
}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
-webkit-transform: translate3d( 0, 0, 0);
transform: translate3d( 0, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
-webkit-transform: translate3d( 0, 0, 0);
transform: translate3d( 0, 0, 0);
}
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With