Closed Darsbir-singh closed 3 years ago
This worked for me :
const params = { on: { slideChange: index => { console.log(index.snapIndex); }, }, }
yup, working thanks for help
I would recommend using realIndexChange instead of slideChange and realIndex instead of snapIndex as additional 'duplicate' slides will be added having their own unique index, in loop mode.
const params = {
on: {
realIndexChange: (swiper) => console.log(swiper.realIndex)
}
}
where to write this logic could someone please tell? Either need to attach params on swiperSlide or on container?
You can simply add it withing your existing options like so : . . . spaceBetween: 50, slidesPerView: 1, loop: true, on: { slideChange: function() { console.log( this.realIndex ); }
hope this helps !
How add on event for html in Angular?
This is code
<swiper
#swiperSliderSpinner
[direction]="'vertical'"
[pagination]="pagination"
[mousewheel]="true"
class="slider-spinner-news-categ">
<ng-template *ngFor="let item of paginationList" swiperSlide>
</ng-template>
</swiper>
Is there a way to add [on] ?
I have tried thing like slideChange, activeIndex, but not able to get the current index
let listImageSlickConfig = { pagination: { el: '.swiper-pagination', clickable: true, }, on: { slideChange: (index) => { console.log(Swiper.index) }, }, getSwiper: (i) => console.log(i), onSlideChange:function(swipe){ console.log(swipe.realIndex) }, rebuildOnUpdate:true, initialSlide: this.props.initialSlide, activeIndex: console.log(Swiper.activeIndex), watchOverflow: true, ContainerEl: 'section', WrapperEl: 'section', zoom: true, }