如何在Virtual Swiper幻灯片中添加动态幻灯片？

Question

我借助idangero的滑动虚拟幻灯片制作了滑动幻灯片。推入所有幻灯片并正确显示和滑动。现在，我想在用户到达渲染的幻灯片的最后一张幻灯片时添加一些其他动态幻灯片，为此，我正在使用mySwiper.virtual.appendSlide（slide）;。已经以阵列形式准备了所有幻灯片，并且当用户幻灯片最后一张幻灯片时，我使用了appendSlide方法。它使空白的前4张幻灯片仅追加一张幻灯片！！！

var swiperVerIndx = app.swiper.create(".swiper-container-v", {
                spaceBetween: 1,
                direction: "vertical",
                preloadImages: true,
                lazy: true,
                autoHeight: false,
                nested: true,                              
                virtual: {
                  slides: (function() {                    
                    var slides = [];
                    var shows = slidesData;

                Object.keys(shows).map((key, value) => {                      
                  var test = shows[key].custom_fields.jnews_single_post;


var imgVdDiv = <div
                           style="background-image:url(` +
                            shows[key].thumbnail_images.medium_large.url +
                            `); width: 100%; height: 100%; background-size: cover; background-position: center;"
                          class="swiper-lazy"
                        />`;
                      if (!shows[key].thumbnail_images) return;
                      let sharableURL = "'" + shows[key].url + "'";
                      let title = "'" + shows[key].title + "'";
                      let postID = "'" + shows[key].id + "'";

                  slides.push(
                    '<div class="swiper-slide" style="height: 100%;">' +
                      '<div class="img-holder">' +
                      imgVdDiv +
                      '<a href="#" onClick="callShare(' +
                      sharableURL +
                      ", " +
                      title +
                      ');" style="position: absolute; color: white; top: 31%; right: 15%;"><i class="f7-icons ios-only">share</i><i class="material-icons md-only">share</i></a>' +
                      "</div>" +
                      `<h5 id="index` +
                      shows[key].id +
                      `" style="text-align: left; padding: 0px 5px;                   


position: relative;" onClick="bookmarkIt(` +
                      postID +
                      `);">` +
                      shows[key].title +
                      "</h5>" +
                      '<div class="excerpt" align="left" style="padding: 0px 5px; margin: -20px 0px; color: dimgray; font-family: initial;">' +
                      `${sanitizeHtml(shows[key].excerpt).replace(
                        "[…]",
                        "..."
                      )}` +
                      "</div>" +
                      '<a href="#" style="float:left; padding: 4px 4px; color: darkgrey; font-size: 15px; display: inline-block;" onClick="openUrl(' +
                      sharableURL +
                      ');">Read more at abc.com</a>' +
                      "</div>"
                  );
                  app.preloader.hide();
                });
                return slides;
              })()
            }
          });



var slides1 = [];              
              swiperVerIndx.on("slideChange", () => {                
                if (
                  swiperVerIndx.virtual.slides.length - 2 ==
                  swiperVerIndx.realIndex
                ) {
                  console.log(`Prepaired additional slide.`);
                  slides1 = [];
                  slides1 = [
                    '<div class="swiper-slide"><div class="swiper-slide" style="height: 100%;"><div class="img-holder"><div style="background-image:url(https://newsum.in/wp-content/uploads/2019/01/Eric-768x512.jpg); width: 100%; height: 100%; background-size: cover; background-position: center;" class="swiper-lazy swiper-lazy-loaded"><a href="#" onclick="callShare(`https://newsum.in/2019/01/26/us-autistic-boy-wins-lifetime-supply-of-peanut-butter-donates-it-to-furloughed-workers/`, `US Autistic boy wins lifetime supply of peanut butter, donates it to furloughed workers`);" style="position: absolute; color: white; top: 31%; right: 15%;"><i class="f7-icons ios-only">share</i><i class="material-icons md-only">share</i></a></div></div></div></div>',
                    '<div class="swiper-slide"><div class="swiper-slide" style="height: 100%;"><div class="img-holder"><div style="background-image:url(https://newsum.in/wp-content/uploads/2019/01/Eric-768x512.jpg); width: 100%; height: 100%; background-size: cover; background-position: center;" class="swiper-lazy swiper-lazy-loaded"><a href="#" onclick="callShare(`https://newsum.in/2019/01/26/us-autistic-boy-wins-lifetime-supply-of-peanut-butter-donates-it-to-furloughed-workers/`, `US Autistic boy wins lifetime supply of peanut butter, donates it to furloughed workers`);" style="position: absolute; color: white; top: 31%; right: 15%;"><i class="f7-icons ios-only">share</i><i class="material-icons md-only">share</i></a></div></div></div></div>',
                    '<div class="swiper-slide"><div class="swiper-slide" style="height: 100%;"><div class="img-holder"><div style="background-image:url(https://newsum.in/wp-content/uploads/2019/01/Eric-768x512.jpg); width: 100%; height: 100%; background-size: cover; background-position: center;" class="swiper-lazy swiper-lazy-loaded"><a href="#" onclick="callShare(`https://newsum.in/2019/01/26/us-autistic-boy-wins-lifetime-supply-of-peanut-butter-donates-it-to-furloughed-workers/`, `US Autistic boy wins lifetime supply of peanut butter, donates it to furloughed workers`);" style="position: absolute; color: white; top: 31%; right: 15%;"><i class="f7-icons ios-only">share</i><i class="material-icons md-only">share</i></a></div></div></div></div>'
                  ];
                }
                if (swiperVerIndx.isEnd) {
                  console.log(`Appending additional slide.`);
                  swiperVerIndx.virtual.appendSlide(slides1);
                  swiperVerIndx.virtual.update();
                }
              });