Question

如何使用Angularjs获取当前幻灯片的数据？我已经解决了这个问题几个小时了，我只能读到他们是如何使用jQuery获得它的，这不是我需要的，因为我使用的是angularjs。

这是我的代码：

<div ng-if="data && ready">
    <slick infinite="true" slides-to-show="1" slides-to-scroll="1" current-index="" dots="true" arrows="true" init-onload="true" data="data">
    <div ng-repeat="xx in data" >
     <img src="@{{xx.banner}}" alt="grid-1"/>
      <p>@{{xx.referno}}</p>
    <p>@{{xx.name}}</p>
    <p>@{{xx.address}}</p>
    </div>
    </slick>
</div>

Answer 1

您可以使用光滑的beforeChange事件获取当前幻灯片数据

// On before slide change
$('your_slick_element_id_or_class').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log(currentSlide);
  $scope.$apply(); // use this if the changes not applied or remove if you get the error "digest method is already running"
});

Answer 2

如果您只想要当前幻灯片的index，那么您几乎就在那里！如您所知，使用current-index属性。但请确保使用ng-init预先对其进行初始化。

假设您当前的索引为myIndex。我已按如下方式编辑了您的代码：

<div ng-if="data && ready" ng-init="myIndex = 0">
  <slick current-index="myIndex" infinite="true" slides-to-show="1" slides-to-scroll="1" dots="true" arrows="true" init-onload="true" data="data">
    <div ng-repeat="xx in data" >
     <img src="@{{xx.banner}}" alt="grid-1"/>
      <p>@{{xx.referno}}</p>
    <p>@{{xx.name}}</p>
    <p>@{{xx.address}}</p>
    </div>
    <p>Current index: {{ myIndex }}</p>
  </slick>
</div>

让我知道它是怎么回事:)）

Answer 3

对任何与我有同样问题的人。我很难使用vasyabigi角光滑，然后我找到了这个

https://github.com/devmark/angular-slick-carousel

它解决了我的问题。

我希望它有所帮助。

获取光滑的Angularjs

3 个答案: