javascript - AngularJS 轮播 : how to display part of previous and next images

Question

如何在 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'
         }
       ];
     }

Answer 1

看看https://github.com/angular-ui/bootstrap/blob/master/template/carousel/carousel.html

您可以使用 templateUrl 指令修改轮播模板。

<carousel interval="myInterval" template-url="path-to-url">