Get current glide slick data Angularjs
How can I get the data of the current spot slide using Angularjs? I have been solving this question for a few hours and I only need to read about how they got it using jQuery, which is not what I need because I am 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>
source to share
If you just want the index
current slide, you're almost there! As you already did, use the attribute current-index
. But make sure you initialize it ahead of time using ng-init
.
Let's assume your current index myIndex
. I edited your code like this:
<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 :)
source to share
You can get the data of the current slide using the beforeChange
slick event
// 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"
});
source to share