Wilson Wilson - 6 months ago 220
AngularJS Question

AngularJS image slider

Am creating an image slider with Angularjs using the codes from here

Using AngularJS 1.15, I could get the image to slide in. But when the second image comes in, the first image will disappear instead of sliding out. Can someone help?

NOTE: this does not work on Firefox and IE but works on Chrome.

Here are my codes
HTML

<div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'">
<div class="slider-content" ng-switch-when="1">
<img src="asset/building.jpg" width="100%" height="400px"/>
</div>
<div class="slider-content" ng-switch-when="2">
<img src="asset/slide-2.jpg" width="100%" height="400px"/>
</div>
<div class="slider-content" ng-switch-when="3">
<img src="asset/slide-3.jpg" width="100%" height="400px"/>
</div>
<div class="slider-content" ng-switch-when="4">
<img src="asset/slide-4.jpg" width="100%" height="400px"/>
</div>
</div>


Javascript

function slideShowController($scope, $timeout) {
var slidesInSlideshow = 4;
var slidesTimeIntervalInMs = 3000;

$scope.slideshow = 1;
var slideTimer =
$timeout(function interval() {
$scope.slideshow = ($scope.slideshow % slidesInSlideshow) + 1;
slideTimer = $timeout(interval, slidesTimeIntervalInMs);
}, slidesTimeIntervalInMs);
}


CSS

.imageslide{
width:100%;
height:400px;
margin: 0 auto;
margin-bottom: 20px;
}

.imageslide .slider-content {
position: absolute;
width:100%;
height:400px;
}

.animate-enter,.animate-leave {
-webkit-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-moz-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-ms-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-o-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
transition:1000ms cubic-bezier(.165,.84,.44,1) all;
}

.animate-enter {
left:100%;
}

.animate-leave.animate-leave-active {
left:-100%;
}

.animate-enter.animate-enter-active,.animate-leave {
left:0;
}

Answer

The biggest issue I see with your plunker is the lack of an ng-app attribute on the page. After adding that and changing the animate out to use margin-left it works fine:

.animate-leave.animate-leave-active {
    margin-left:-100%;
}

Forked plunkr: http://plnkr.co/edit/BxWNlYVJUCNL7C1K65aU?p=preview

Comments