Menu
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;
}
398
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
194
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>
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
