Angular Slick das Hinzufügen von Text caption

Ich lerne einige benutzerdefinierte taglines für jede Objektträger mit dem Winkel Slick https://www.npmjs.com/package/angularslick Angular Slick das Hinzufügen von Text caption

Wie soll ich Umfang die Textdaten auf jede der aktiven Folien selbst hinzufügen?

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

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", 
    ]; 
})

Quelle

2016-04-05 mark5

binden nur die Daten zu einem einzigen Array, enthalten sowohl das Bild src einem caption wie so

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", 
    ]; 
})

und jetzt können Sie nur ng-repeat die $scope.images wie so:

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

Quelle

2016-04-05 11:54:16 Zamboney

thx das hat mir sehr geholfen! ;) – 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>

Hier geht die Antwort auf Ihre Art und besseren Ansatz kann in diesem Stift

Pen for Slick

Quelle

2016-04-05 11:51:02

Dies sollte zu sehen Arbeit:

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

Quelle

2016-04-05 11:53:13

Angular Slick das Hinzufügen von Text caption

Antwort

Verwandte Themen