AngularJS carousel: как отобразить часть предыдущих и следующих изображений

Как показать небольшие части предыдущего и следующего изображения в слайд-шоу в 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%;
}

Яваскрипт

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

1 ответ