Set carousel parameters in javascript

[nikwou]

I have see this has been discussed before (e.g. #15), but apparently with a different aim. I would like to pass width and height via javascript as the values will need to be calculated depending on the actual viewport size. Not aware of any other way (i.e. through pure html) to realise this. Is it possible to pass width and height parameters as part of the Vue object creation and if so, could you give an example? Thank you in advance.

[chepe263]

You could probably have a computed property and pass it using v-bind

  <template>
    <div>
      <carousel-3d v-bind="car_props">
        <slide v-for="(s, i) in slides" :index="i" :key="i">
            <img :src="s" />
          </slide>
      </carousel-3d>
    </div>
  </template>
  <script>
  import { Carousel3d, Slide } from "vue-carousel-3d";

  export default {
    name: "Example",
    components: {
      Carousel3d,
      Slide,
      TituloNegrita,
    },
    data: function(){
      return {
        width: 263,
        height: 140,
        slides: [
          require('./path/to/image1.png'),
          require('./path/to/image2.png'),
          require('./path/to/image3.png'),
          require('./path/to/image4.png'),
        ],
      }
    },
    computed: {
      /**
       * Props for the carrousel 3d
       */
      car_props: function(){
        return {
          width: this.width,
          height: this.height,
          display: Math.min(this.slides.length, 3),
          autoplay: true
        }
      }
    }
  }
  </script>

The code above wasn't tested but you can get the idea on how It could work.

How did you solve it in the end?