html - Slideshow angular not working -


have found example of how make slideshow angular, done. slide-effect left not work in example. http://plnkr.co/edit/bxwnlyvjucnl7c1k65au?p=preview

anyone idea 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>

you haven't done wrong. nganimate deprecated in angular 1.2, you'll need make changes code. https://johnpapa.net/preparing-for-animations-in-angular-1-2-0/

if switch earlier version (1.1.5 below, in plnker) you'll see 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

Post a Comment

Popular posts from this blog

java - SSE Emitter : Manage timeouts and complete() -

i writing web app multiple listeners(evcentsource sse clients js) connected server . want store sse emitter per connected listener : can done in memory or other means assigning id each client able achieve far now question ; how send response/event specific client connected web app ? while doing sseemmiters stored either getting completed or timed out. how prevent ? how keep sseemmiter available open infinite time (till client closes) , send events selectively .
Read more

jquery - uncaught exception: DataTables Editor - remote hosting of code not allowed -

i'm trying implement crud operation using datatableseditor using datatables.but i'm getting error messages: 1)uncaught exception: datatables editor - remote hosting of code not allowed. please see http://editor.datatables.net details on how purchase editor license 2)typeerror: a.editor undefined 3) $.fn.datatable.editor not constructor" what reason? here configuration: <%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>insert title here</title> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.datatables.min.css"> <link re...
Read more

java - How to resolve error - package com.squareup.okhttp3 doesn't exist? -

i trying convert json java object use of gson in maven, following youtube video guidance - https://www.youtube.com/watch?v=vqgghm9pwe0 , theres error occurs when in main class error - package com.squareup.okhttp3 doesn't exist. code below: java package com.codebeasty.json; import com.squareup.okhttp3.okhttpclient; public class main { private static okhttpclient client = new okhttpclient(); public static void main (string [] args) { } } i put in dependency in pom.xml: <dependencies> <dependency> <groupid>com.squareup.okhttp3</groupid> <artifactid>okhttp</artifactid> <version>3.4.2</version> </dependency> <dependency> <groupid>com.google.code.gson</groupid> <artifactid>gson</artifactid> <version>2.8.0</version> </dependency> </dependencies> i dont understand why doesn't recognize com.squareup. there may need download? have downl...
Read more