Swiper Tutorial

Ionic Framework
1

The ionic swiper tutorial says to put this inside your component class

swiperModules = [IonicSlides]

I have done this and get this error. Any idea?

image
image746×78 10.8 KB

I also get it with slideChange
image

Also just noticed that afterInit is never called. “swiperReady()” never gets called

image
image786×74 12.6 KB

2

For ionic register swiper

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

For angular Follow Swiper element documentation.
In html <swiper-container #swiperEx with other properties

In .ts file

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