Customizing SwiperJS to be more like ion-slides?

Ionic Framework
1

Hi

Im most cases when you just try out any ion-slides examples with swiperjs, nothing works exactly the same at all.

So I found out the ion-slides component code here, ionic-framework/core/src/components/slides/IonicSlides.ts at 75ffeee933ae353d2601670178896116c81923e0 · ionic-team/ionic-framework · GitHub

Which I will just apply to my example and see how it will work. I hope for success. I have noted that even though some properties are default in swiper js, on the ts file they are also set, perhaps for completeness, not really sure, will do the same either way.

I have just done a search on the swiper api and I cant seem to find some props, e,g slidesPerColumn, slidesPerColumnFill, though I have seen one example these were uses.

Has anyone tried to redo the ion-slides examples with swiperjs and was successful to the letter t, like a 100% match working example? If so, can you please advise?

Thanks in advance for your help.

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