How to get the Current Index of the Slider ?

[Darsbir-singh]

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

[LKF92]

This worked for me :

const params = { on: { slideChange: index => { console.log(index.snapIndex); }, }, }

[Darsbir-singh]

yup, working thanks for help

[mib00038]

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

[ShahzaibRiaz]

where to write this logic could someone please tell? Either need to attach params on swiperSlide or on container?

[Nytsee]

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 !

[StasSpawn]

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