AngularJS image slider

Question

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;
}

fiddle doesn't support angularjs 1.1.5. Tried with plunker but the results are different from what I see in the system. plnkr.co/edit/sV1xckE7SCyMX9b3dVT0 here you go. — Wilson
– Wilson, Commented Oct 16, 2013 at 19:43
I've added an answer. Make sure you place an ng-app on your html (your plunkr didn't work without it) and I think some browsers have issues with animating left. I swapped it out for margin-left and it works in chrome and ff. IE may or may not work. — lucuma
– lucuma, Commented Oct 16, 2013 at 20:52

lucuma · Accepted Answer · 2013-10-16 20:50:40Z

4

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

edited Oct 16, 2013 at 20:50

answered Oct 16, 2013 at 20:40

lucuma

18.3k4 gold badges68 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

yohan.jayarathna Over a year ago

plunkr example not working in IE 8. I tried it with angular version 1.2. But it it didn't work too :( How to the do same slider using angular 1.2 ? Thanks in advance

lucuma Over a year ago

Angular doesn't officially support ie8.

Tam · Accepted Answer · 2016-05-27 03:48:59Z

Below is the code I have refer from this page and tested. It worked for me now.

I just need to make it dynamic passing image url from Jsp custom tags. Note :

It is working for me in Chrome and Firefox.

But it did not work for In IE 10. I could not understand why it wont working in IE 10 can any one tell? Even it does not show any error in console.

<html ng-app>

<head>

<script data-require="[email protected]" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>

<script>
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);
 }
 </script>
 <style>

 .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;
}

 </style>

 </head>

<body>

<div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'">
    <div class="slider-content" ng-switch-when="1">
        <img src="http://digitalresult.com/wp-content/uploads/2015/10/fox-animal-hd-wallpapers-47.jpeg" width="100%" height="400px"/>
    </div>  
<div class="slider-content" ng-switch-when="2">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTewdD9dUZGbaCaRtV2Ggz_YxQq1tbhVcSphtRUjosU8a0_JOZF" width="100%" height="400px"/>
    </div>
<div class="slider-content" ng-switch-when="3">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/4e/ac/4e/4eac4e00cebdea7f62359bfd1b2ca51b.jpg" width="100%" height="400px"/>
    </div>  
<div class="slider-content" ng-switch-when="4">
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTrBU0M7EwiGepnnccRoe7jA5_fQ-AaOiu6WpehFqz85HhYhKHk" width="100%" height="400px"/>
    </div>  
    </div>

    </body>

    </html>

Collectives™ on Stack Overflow

AngularJS image slider

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related