Angular Slick添加文字说明

Angular Slick adding text caption

本文关键字：文字说明 添加 Slick Angular      更新时间：2024-01-12

我正在学习使用角度平滑为每张幻灯片添加一些自定义标语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:

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

只需将数据绑定到一个数组，该数组包含图像src和caption，类似

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：

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

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

这就是你的答案，更好的方法可以在这个笔中看到

Slick 笔

这应该有效：

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

相关文章：