[Vuejs]-How to make this carousel unreliable on id assigned in props?

by

1👍

✅

If you want the Carousel to be responsible to show / hide sliders depending on the selectedId, you could use a render function to dynamically add a css class to display each slider :

import { h } from 'vue'

export default {
  props: {
    selectedId: {
      type: Number,
      required: true
    }
  },
  render() {
    const slides = this.$slots.default()[0].children
    const render = []
    
    slides.forEach((slide, index) => {
      render.push(h('div', { class: this.selectedId === index ? '' : 'hidden'}, slide))
    })
    
    return render
  }
}

I have adapted your SFC playground accordingly.

You can also insert slides in the dom only when user is navigating, which would result of a kind of "lazy loading" :

  render() {
    const slide = this.$slots.default()[0].children[this.selectedId]
    
    return h('div', slide)
  }
👤Brewal

Leave a comment