как виртуализировать ионные слайды в ioni c 4

Question

как использовать следующий метод в ioni c 4: https://swiperjs.com/api/#virtual

Я пытался применить его в соответствии с документацией API, но это код не работает. Что я делаю не так?

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;
    }),
  }
};
//----------------------------------------------

}

Answer 1

Похоже, что вам нужно сначала инициализировать Swiper

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

Вы можете попробовать это здесь:

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;
        })
    }
});