Customizing SwiperJS to be more like ion-slides?

Ionic Framework
2

As per documentation
ion-slides was deprecated in v6.0.0 and removed in v7.0.0.
Swiper 9 introduced Swiper Element as a replacement for its Angular component,

For ionic register swiper

// import function to register Swiper custom elements
import { register } from 'swiper/element/bundle';
// register Swiper custom elements
register();

Posting here the code which works for me.


export class HomePage implements AfterViewInit{

  swiper_images=['../../assets/images/photo-1.jpg',
  '../../assets/images/photo-2.jpg',
  '../../assets/images/photo-3.jpg',
  '../../assets/images/photo-4.jpg',
  '../../assets/images/photo-5.jpg', ]
  
  @ViewChild("swiperEx") swiperEx ?: ElementRef<{ swiper: Swiper }>

  ngAfterViewInit(): void {
    register();
  }
   onSlideChange() {
    console.log(this.swiperEx?.nativeElement.swiper.activeIndex);
  }

  
  onSlidePrev()
  {
      this.swiperEx?.nativeElement.swiper.slidePrev();
  }
  onSlideNext()
  {
    this.swiperEx?.nativeElement.swiper.slideNext(1000)
  }  
}

For more details watch

1 Like