如何在 AngularJS 的幻灯片中显示上一张和下一张图片的一小部分?上一张和下一张图片的部分应该在桌面和平板屏幕上显示,但不能在移动设备上显示
这是我已有的:http://codepen.io/juliezzz/pen/qZezzx
<div ng-app="app">
<div ng-controller="CarouselDemoCtrl" id="slides_control">
<div>
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}">
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</slide>
</carousel>
</div>
CSS:
#slides_control > div{
height: 200px;
}
img{
margin:auto;
width: 800px;
}
#slides_control {
width: 100%;
}
JavaScript
angular.module('app', ['ui.bootstrap']);
function CarouselDemoCtrl($scope){
$scope.myInterval = 3000;
$scope.slides = [
{
image: 'http://lorempixel.com/400/200/'
},
{
image: 'http://lorempixel.com/400/200/food'
},
{
image: 'http://lorempixel.com/400/200/sports'
},
{
image: 'http://lorempixel.com/400/200/people'
}
];
}
最佳答案
看看https://github.com/angular-ui/bootstrap/blob/master/template/carousel/carousel.html
您可以使用 templateUrl
指令修改轮播模板。
<carousel interval="myInterval" template-url="path-to-url">
关于javascript - AngularJS 轮播 : how to display part of previous and next images,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37420478/