AngularJS Karussell: Wie wird ein Teil der vorherigen und nächsten Bilder angezeigt?

Question

Wie können kleine Teile des vorherigen und nächsten Bildes in der Diashow in AngularJS angezeigt werden? Die Teile der vorhergehenden und nachfolgenden Bilder sollten auf dem Desktop und Tabet Bildschirmen angezeigt werden, aber nicht auf mobilen

Dies ist, was ich bereits: 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

Werfen Sie einen Blick auf https://github.com/angular-ui/bootstrap/blob/master/template/carousel/carousel.html

Sie die Vorlage eines Karussells ändern können die templateUrl Richtlinie durch die Verwendung.

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