IonSlides with scrollbar or pager customizations throws errors

Ionic Framework Ionic React
1

When using IonSlides with anything other than the stock scrollbar or pager options, I have found that you must specify several values in the slideOpts options (even though some of them are listed as optional in the Swiper API documentation for pagination and scrollbar). Failing to specify these values causes the swiper code to throws errors.

For pager you must specify the following values in slideOpts.pagination:

  • el
  • type
  • bulletActiveClass
  • hiddenClass
  • lockClass
    Note that you might need to specify other classes if you choose a pagination type other than “bullets”.

For scrollbar you must specify the following values in slideOpts.scrollbar:

  • el
  • lockClass
  • dragClass, if you set draggable to true

Specifying the default values listed in the documentation worked for me. I would have expected the IonSlides implementation to provide defaults for these values, but apparently it doesn’t.