角度スリック追加テキストキャプション

は、私は、角度滑らかなhttps://www.npmjs.com/package/angularslick 角度スリック追加テキストキャプション

を使用して、各スライドのためにいくつかのカスタムキャッチフレーズを追加するために学んでいるどのようにすべきである私スコープアクティブなスライド自体のそれぞれの上にテキストデータ？

<body ng-controller="MainController"> 
    <div class="col-md-9">   
     <slick autoplay="true" autoplaySpeed="500" fade="true" dots="true"> 
     <div ng-repeat="image in images"> 
      <img data-lazy="{{image}}"> 
      <div ng-repeat"caption in captions"></div> 
     </div> 
     </slick> 
    </div> 
</body>

app.js：あなたの方法で回答し、より良いアプローチThat`s

var app = angular.module('myApp', ['slick']); 
app.controller('MainController', function($scope) { 
    $scope.images = [ 
    "images/slider-banner1.png", 
    "images/slider-banner2.png", 
    ]; 

    $scope.captions = [ 
    "tagline for banner1", 
    "tagline for banner2", 
    ]; 
})

出典

2016-04-05 mark5

だけで画像srcので

var app = angular.module('myApp', ['slick']); 
app.controller('MainController', function($scope) { 
    $scope.images = [ 
    { 
     src: "images/slider-banner1.png", 
     caption: "tagline for banner1" 
    },{ 
     src: "images/slider-banner2.png", 
     caption: "tagline for banner2", 
    ]; 
})

、今あなたがそうのようなちょうどng-repeat$scope.imagesできるようcaption両方を含む単一のアレイにデータをバインド：

<body ng-controller="MainController"> 
    <div class="col-md-9">   
     <slick autoplay="true" autoplaySpeed="500" fade="true" dots="true"> 
     <div ng-repeat="image in images"> 
      <img data-lazy="{{image.src}}"> 
      <span>{{image.caption}}</span> 
     </div> 
     </slick> 
    </div> 
</body>

出典

2016-04-05 11:54:16 Zamboney

をこれは私を助けてくれました！ ;） – mark5

<slick autoplay="true" autoplaySpeed="500" fade="true" dots="true"> 
    <figure ng-repeat="image in images"> 
    <img data-lazy="{{image}}"> 
    <figcaption ng-repeat"caption in captions">{{caption}}</figcaption> 
</figure> 
     </slick>

はこのペンで見ることができ

Pen for Slick

出典

2016-04-05 11:51:02

これがすべき仕事：

<body ng-controller="MainController"> 
<div class="col-md-9">   
    <slick autoplay="true" autoplaySpeed="500" fade="true" dots="true"> 
    <div ng-repeat="image in images"> 
     <img data-lazy="{{image}}"> 
     <div ng-bind="captions[$index]"></div> 
    </div> 
    </slick> 
</div>

出典

2016-04-05 11:53:13

角度スリック追加テキストキャプション

答えて

関連する問題