AngularJS轮播：如何显示上一张和下一张图片的一部分

Question

How to show small parts of previous and next image in slideshow in AngularJS? The parts of previous and next images should be displayed on desktop and tabet screens, but not on mobile

This is what I already have: 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

Take a look at https://github.com/angular-ui/bootstrap/blob/master/template/carousel/carousel.html

You can modify the template of a carousel by using the templateUrl directive.

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