Dynamically render slick list items

[imamrb]

Hi.

I want to dynamically render videos inside a carousel. The reason I want to do so because having all the video items rendered at once consumes a lot of memory and make the app sluggish. Videos are renderd using video.js inside the <carousel-video> component.

The code looks like below:

<template>
  <div>
    <VueSlickCarousel
      ref="carousel"
      v-bind="settings"
      @beforeChange="onSlideBeforeChange"
      >
      <carousel-video
        v-for="video in visibleVideos"
        ....
      ></carousel-video>
  </div>
</template>

....
methods: {
    onSlideBeforeChange: function(currentIndex, nextIndex) {
      ...calculate lowerBound, upperBound for visibleVideos.
    },
},
computed: {
  visibleVideos: function() {
    slice from a videoArray using lowerBound and upperBound
  }
}

Here I want to increase/decrease the number of <carousel-video> rendered dynamically.

However when the upperBound and lowerBound update is triggerd based on some condition, the internal state of VueSlickCarousel doesn't update.

The items are rendered in dom but these two class is missing in slick-list items - slick-current slick-active. That's why nothing is shown in the view. After that, If I click the next or previous button provided by VueSlickCarousel, it removes the whole component from dom.

Before updating upperBound and lowerBound

After update of upperBound/lowerBound

There are a video.js method called dispose() to free up memory consumed by a player instance but that removes the generated html from the dom as well. I tried with replacing the removed html in the dom again but couldn't make it work.

How can I fix this? Is it technically possible to do so or what will be ur suggestion?

Thanks in advance for any kind of help or suggestion.