Question

尝试使用bootstrap，angular和carousel，在我们本地驱动器上各自的文件夹中显示图像，但仍然坚持如何定制我的角度文件。这是一个示例，但此示例从Internet中选择图像。我该怎么做呢这是包含源代码http://www.cssscript.com/demo/responsive-image-carousel-with-angular-js-and-bootstrap-3/#abstract

的网站

这是角度文件。

app.controller('portfoliocontroller', ['$scope', '$http',
  function($scope, $http) {
    $scope.title = 'Our portfolio';
    $scope.w = window.innerWidth;
    $scope.h = window.innerHeight - 20;
    $scope.uri = "http://lorempixel.com";
    $scope.folders = [
      'abstract',
      'animals',
      'business',
      'cats',
      'city',
      'food',
      'night',
      'life',
      'fashion',
      'people',
      'nature',
      'sports',
      'technics',
      'transport'
    ];
    $scope.images = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

    $scope.currentFolder = $scope.folders[0];
    $scope.selectFolder = function(folder) {
      $scope.currentFolder = folder;
    };
    $scope.activeFolder = function(folder) {
      return (folder === $scope.currentFolder) ? 'active' : '';
    };

  }
]);

这是html文件

<div class="container">
  <!-- Carousel
        ================================================== -->
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" ng-repeat="img in images" class="{active : (img === 0)}" data-slide-to="{{img}}"></li>
    </ol>
    <div class="carousel-inner">
      <div ng-class="{item: true, active : (img === 0)}" ng-repeat="img in images">
        <img ng-src="{{uri}}/{{w}}/{{h}}/{{currentFolder}}/{{img}}" alt="Slide numder {{img}}">
        <div class="container">
          <div class="carousel-caption"></div>
        </div>
      </div>
    </div>
    <a class="left carousel-control" data-target="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
    <a class="right carousel-control" data-target="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
  <!-- /.carousel -->

  <!-- Fixed navbar -->
  <div class="navbar navbar-default navbar-fixed-botom" role="navigation">
    <div class="container">
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li ng-repeat="folder in folders" class="{{activeFolder(folder)}}" ng-click="selectFolder(folder)"> <a ng-data-target="#{{folder}}">{{folder}}</a> 
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </div>

Answer 1

你可以使用这个。这完全基于AngularJS和Bootstrap。

https://angular-ui.github.io/bootstrap/#/carousel

Answer 2

如果您要做的就是调整该库以使用本地文件夹，您只需将uri替换为基本图像文件夹等。像这样的东西。

$scope.uri = "path/to/my/images";

您的标记将引用相同的文件夹：

<img ng-src="{{uri}}/{{currentFolder}}/{{img}}" alt="Slide numder {{img}}">

图像的宽度和高度必须在图像本身或css中格式化。

Angular Js bootstrap轮播

2 个答案: