All geek questions in one place

AngularJS Image Slider

Create an image slider using Angularjs using the codes here

Using AngularJS 1.15, I could get the image to enter. But when the second image comes in, the first image will disappear, not pop up. Can anyone help?

NOTE. This does not work in Firefox and IE, but it works in Chrome.

Here are my HTML codes

<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; }
+6
source share
2 answers

The biggest problem that I see with your plunker is the lack of the ng-app attribute on the page. By adding this and changing the animation to use margin-left, it works fine:

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

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

+4
source

Below is the code that I link to this page and tested. Now he worked for me.

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

It works for me in Chrome and Firefox.

But this did not work for IE 10. I could not understand why it does not work in IE 10, can anyone tell? Even in it there are no errors in the console.

 <html ng-app> <head> <script data-require=" angular.js@1.1.5 " 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>
+1
source

Source: https://habr.com/ru/post/956112/

More articles:


All Articles