Question

＆＃13;

<body ng-app="myApp">
		
		<div  ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'">
			<div class="slider-content" ng-switch-when="1">
				<img src="../images/ship.png" />
			</div>	
			<div class="slider-content" ng-switch-when="2">
				 <img src="../images/cargo.png" />
			</div>
			<div class="slider-content" ng-switch-when="3">
				<img src="../images/lake.png" />
			</div>	
			<div class="slider-content" ng-switch-when="4">
				<img src="../images/cargo2.png" />
			</div>	
		</div>		
		<script>
		var app = angular.module('myApp', ['angular-responsive']);
		app.controller('slideShowController', function($scope, $timeout) {
		//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>
		
	</body>

＆＃13;

<script src="../bower_components/angular/angular.min.js"></script>
         <script src="../bower_components/angular-responsive/src/responsive-directive.js"></script>
         <script src="../bower_components/script.js"></script>
    <link rel="stylesheet" href="../bower_components/style2.css" />
    
    <link href="../bower_components/style3.css" rel='stylesheet' type='text/css'>

＆＃13;

我需要角度js中的图像滑块插件。它必须同时适用于桌面和移动设备。你能发一个Image滑块Angular JS的例子。

这是我正在使用的代码。这里我滑动功能正常。但没有回应。对于移动视图，它正在运行。

Answer 1

您可以查看this库。它是一个Angular旋转木马，可以移动（用于移动），但也可以用于桌面的常规导航。

Answer 2

您可以尝试使用此功能：https://github.com/thenikso/angular-flexslider

但请记住，您应该自己尝试一下，发布您的代码，然后您（可能）会收到答案。不要求提供完整的代码。

Answer 3

你可以看一下：http://jsfiddle.net/4m8pppyy

<div ng-controller="MyCtrl"> <div class="company-slide-outer"><company-project-directive></company-project-directive></div>

Angular js Images滑块示例

3 个答案: