Get current slide data of slick Angularjs

Question

How can I get the data of the current slide of the slick using Angularjs? I've been solving this one for hours and I only got to read about how they got it using jQuery, which is not what I needed because I'm using angularjs.

This is my code:

<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

If you simply want the index of the current slide you are almost there! As you have already done, use the current-index attribute. But make sure you initialize it beforehand by using ng-init.

Let's assume your current index is myIndex. I have edited your code as follows:

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

Let me know how it goes :)

Answer 2

You can get the current slide data using the beforeChange event of slick

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