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">

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

1 个答案: