how to virtualize ion-slides in ionic 4

user_11051610 0
Viewed 449

how to use the following method in ionic 4: https://swiperjs.com/api/#virtual

I tried to apply it according to the API documentation, but this code does not work. What am I doing wrong?

ngOnInit() {
//----------------------------------------------
var slides = document.querySelector("ion-slides");
// Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
slides.options = {
  initialSlide: 1,
  direction: "vertical",
  speed: 150,
  preloadImages: false,
  lazy: true,

  virtual: {
    slides: (function() {
      var slides = [];
      for (var i = 0; i < 600; i += 1) {
        slides.push(
          '<ion-slide><img src="https://picsum.photos/600/600/?image=' +
            (i + 1) +
            '"/><p>' +
            (i + 1) +
            "</p></ion-slide>"
        );
      }
      console.log(JSON.stringify(slides));
      return slides;
    }),
  }
};
//----------------------------------------------

}

swiper.js ionic-framework angular javascript
1 Answers

It looks like you have to initialize Swiper first

var mySwiper = new Swiper('.ion-slides');

can you try this here:

let mySwiper = new Swiper('.ion-slides', {
    initialSlide: 1,
    direction: "vertical",
    speed: 150,
    preloadImages: false,
    lazy: true,

    virtual: {
        slides: (function() {
            var slides = [];
            for (var i = 0; i < 600; i += 1) {
                slides.push(
                    '<ion-slide><img src="https://picsum.photos/600/600/?image=' +
                    (i + 1) +
                    '"/><p>' +
                    (i + 1) +
                    "</p></ion-slide>"
                );
            }
            console.log(JSON.stringify(slides));
            return slides;
        })
    }
});
user_19036530
Related