user7087446 user7087446 - 26 days ago 22
AngularJS Question

Slideshow angular not working

Have found an example of how to make a slideshow with Angular, it is almost done. But the slide-effect to the left does not work like in this example. http://plnkr.co/edit/BxWNlYVJUCNL7C1K65aU?p=preview

Anyone an idea what I have done wrong.



var pictures = angular.module("myApp", [])
.controller("SlideShowController", function($scope, $timeout) {
var slideInSlideshow = 4;
var slideTimeInterval = 4000;

$scope.slider = 1;
var slideTimer =
$timeout(function interval() {

$scope.slider = ($scope.slider % slideInSlideshow) + 1;


slideTimer = $timeout(interval, slideTimeInterval);
}, slideTimeInterval);

var image = {
one: "image/image01.jpg",
two: "image/image02.jpg",
three: "image/image03.jpg",
four: "image/image04.jpg"
};

$scope.image = image;
});

.slideshow {
width: 600px;
height: 400px;
margin: 0 auto;
margin-bottom: 30px;
overflow: hidden;
position: relative;
border: 1px solid red;
}

.slider {
font-family: "Arial", sans-serif;
text-align: center;
position:relative;
width:600px;
overflow:hidden;
background: #1a1a1a;
margin: 0 auto;
color: white;
text-shadow: 1px 1px 1px #000;
border-radius: .3em;
margin-top: 30px;
}

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

.slide-image {
width: 100%;
height: auto;
}

.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 {
margin-left: 100%;
}

.animate-enter.animate-enter-active {
margin-left:0;
}

.animate-leave {
margin-left:0;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="SlideShowController" class="slideshow" ng-switch="slider" ng-animate="'animate'">
<div class="slider-content" ng-switch-when="1">
<img ng-src="{{image.one}}" class="slide-image" alt="meizu-m3-picture" />
</div>

<div class="slider-content" ng-switch-when="2">
<img ng-src="{{image.two}}" class="slide-image" alt="meizu-mx6-picture"/>
</div>

<div class="slider-content" ng-switch-when="3">
<img ng-src="{{image.three}}" class="slide-image" alt="meizu-m3s-picture"/>
</div>

<div class="slider-content" ng-switch-when="4">
<img ng-src="{{image.four}}" class="slide-image" alt="meizu-m3e-picture"/>
</div>
</div>
</body>




Answer

You haven't done anything wrong. ngAnimate was deprecated in Angular 1.2, so you'll need to make changes to your code. https://johnpapa.net/preparing-for-animations-in-angular-1-2-0/

If you switch to an earlier version (1.1.5 below, as in the Plnker) you'll see your code worked fine.

var pictures = angular.module("myApp", [])
  .controller("SlideShowController", function($scope, $timeout) {
    var slideInSlideshow = 4;
    var slideTimeInterval = 1000;

    $scope.slider = 1;
    var slideTimer =
      $timeout(function interval() {

        $scope.slider = ($scope.slider % slideInSlideshow) + 1;


        slideTimer = $timeout(interval, slideTimeInterval);
      }, slideTimeInterval);

    var image = {
      one: "image/image01.jpg",
      two: "image/image02.jpg",
      three: "image/image03.jpg",
      four: "image/image04.jpg"
    };

    $scope.image = image;
  });
#mainbody {
	width:50%;
	height: auto;
	margin: 0 auto;
}

.slideshow {
  width: 600px;
  height: 400px;
  margin: 0 auto;
  margin-bottom: 30px;
  overflow: hidden;
  position: relative;
  border: 1px solid red;
}
.slider {
  font-family: "Arial", sans-serif;
  text-align: center;
  position: relative;
  width: 600px;
  overflow: hidden;
  background: #1a1a1a;
  margin: 0 auto;
  color: white;
  text-shadow: 1px 1px 1px #000;
  border-radius: .3em;
  margin-top: 30px;
}

.slideshow .slider-content {
  position: absolute;
  width: 100%;
  height: 400px;
}
.slide-image {
  width: 100%;
  height: auto;
}
.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 {
  margin-left: 100%;
}
.animate-enter.animate-enter-active {
  margin-left: 0;
}
.animate-leave {
  margin-left: 0;
}
.animate-leave.animate-leave-active {
  margin-left: -100%;
}
    <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>


<body ng-app="myApp">
  <div ng-controller="SlideShowController" class="slideshow" ng-switch="slider" ng-animate="'animate'">
    <div class="slider-content" ng-switch-when="1">
      <img ng-src="{{image.one}}" class="slide-image" alt="meizu-m3-picture" />
    </div>

    <div class="slider-content" ng-switch-when="2">
      <img ng-src="{{image.two}}" class="slide-image" alt="meizu-mx6-picture" />
    </div>

    <div class="slider-content" ng-switch-when="3">
      <img ng-src="{{image.three}}" class="slide-image" alt="meizu-m3s-picture" />
    </div>

    <div class="slider-content" ng-switch-when="4">
      <img ng-src="{{image.four}}" class="slide-image" alt="meizu-m3e-picture" />
    </div>
  </div>
</body>

Comments