<分区>
offtopic:抱歉我的英语不好。 ontopic:我正在尝试使用 AngularJS 中的控件进行响应式幻灯片放映(我也是 Angular 方面的新手)并且我被困在幻灯片控件的一部分，我得到了这个:
应用程序.js
angular.module('slider', [])
.controller('sliderCtrl', ['$scope', function($scope) {
var thumbs = $scope.thumbs = [];
for(i=1;i<=11;i++) {
thumbs.push({
image: 'http://lorempixel.com/500/300/sports/' + i
})
}
}])
.service('thumbService', function() {
this.resize = function(elem, scope) {
elem.style.width = scope.containerWidth + 'px';
}
})
.directive('carousel', ['$timeout', '$window', function($timeout, $window) {
return {
restrict: 'EA',
replace: true,
transclude: true,
controller: 'sliderCtrl',
templateUrl: 'carousel.html',
link: function(scope, elem) {
angular.element($window).on('load resize', function() {
$timeout(function() {
scope.containerWidth = elem[0].offsetWidth * 0.25;
}, 200);
});
}
}
}])
.directive('thumbs', ['$window', 'thumbService', function($window, thumbService) {
return {
restrict: 'EA',
replace: true,
templateUrl: 'thumbs.html',
require: '^carousel',
transclude: true,
link: function(scope, elem) {
thumbService.resize(elem[0], scope);
scope.$watch('containerWidth', function() {
thumbService.resize(elem[0], scope);
});
}
};
}])
.directive('controls', [function() {
return {
restrict: 'E',
replace: true,
require: '^carousel',
templateUrl: 'controls.html',
link: function(scope, elem, attrs) {
scope.goPrev = function() {
// TODO
}
scope.goNext = function() {
// TODO
}
}
}
}])
.run(function($templateCache) {
$templateCache.put('thumbs.html', '<div class="slider-gallery_item" ng-transclude></div>');
$templateCache.put('carousel.html',
'<div id="slider" class="slider-wrapper">' +
' <div class="slider-gallery" ng-transclude></div>' +
' <controls></controls>' +
'</div>');
$templateCache.put('controls.html',
' <div id="slider-controls"> ' +
' <div class="slider-gallery_prev" ng-click="goPrev()"><</div>' +
' <div class="slider-gallery_next" ng-click="goNext()">></div>' +
' </div>');
})
样式.css
.slider-wrapper {
margin: 0 auto;
overflow: hidden;
max-width: 100%;
}
.slider-gallery {
transform: translate3d(0,0,0);
width: 20000em;
position: relative;
top: 0;
}
.slider-gallery_item {
width: 200px;
float: left;
padding: 0 10px;
}
.slider-gallery_item img {
display: block;
max-width: 100%;
height: auto !important;
}
.slider-gallery {
margin-top: 10px;
}
.slider-gallery_prev {
cursor: pointer;
float: left;
}
.slider-gallery_next {
cursor: pointer;
float: right;
}
你可以在http://plnkr.co/edit/25xt9qUvLaaxgYJQRUzJ?p=preview上看到它
如您所见，有点响应，但现在，我总共有 11 张图片，我该怎么做才能使下一个和上一个按钮起作用？不是技术问题，更多的是应用的方法，
谢谢!