AngularJSカルーセル：前後の画像の一部を表示する方法

Question

AngularJSのスライドショーで前後の画像の小さな部分を表示するには？前後の画像の一部は、デスクトップとtabet画面に表示されるべきではなく、モバイル

にこれは私がすでに持っているものです：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

はあなたがtemplateUrlディレクティブを使用することによって、カルーセルのテンプレートを変更することができhttps://github.com/angular-ui/bootstrap/blob/master/template/carousel/carousel.html

を見てみましょう。

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