Vue-carousel: Bug: wrong slide width on first init

[Ohar]

Version: 0.9.0

Description

Slides has wrong width on first init.

It looks like reason of this is calculating slides width right after component init, when fonts are not loaded yet.

UPDATE: Here is my repository with demo page.

Screenshot

Steps to reproduce

1. Open demo page.
2. Look at last slide.
3. Click on “×” button.
4. Slides width fixed now.

After it all resources would be cached already and you need to clear cache with Ctrl + F5 to reproduce bug again.

Behavior

Expected

Slides fix its width only after all resources are loaded.

Observed

Slides fix its width right after initialization.

[quinnlangille]

Hey @Ohar, great reporting! I'll mark this as a bug report and see if we can get someone to submit a fix! We're currently working on the way slide/carousel width is calculated, so if this is effected by the changes I'll make sure to report here :~)

[VipPhilstar]

same issue

[dmitr11]

use ready (jquery)

For example

<template>
    <carousel :per-page-custom="[[320, 1], [425, 1], [768, 2], [1024, 3]]" :paginationActiveColor="'#00bddc'" :paginationColor="'#99e8ff'">
        <slide v-for="item in items" :key="item.id">
            <div class="item">
                <div class="img">
                    <img :src="'/storage/app/' + item.image" alt="">
                </div>
                <div class="description">
                    <div class="created">
                        <img src="images/edit.png" alt="">
                        <div class="text">{{ item.created_at }}</div>
                    </div>
                    <div class="title">{{ item.title }}</div>
                    <div class="text">{{ item.short_text }}</div>
                    <div class="button">
                        <a :href="item.more" class="btn">more</a>
                    </div>
                </div>
            </div>
        </slide>
    </carousel>
</template>

import { Carousel, Slide } from 'vue-carousel';
    export default {
        name: "publications",
        components: {
            Carousel,
            Slide
        },
        data(){
            return {
                items: [],
            }
        },
        props: ['data'],
        mounted(){
            let el = this;
            $(document).ready(function() {
                el.items = el.data;
            });
        }
    }

[quinnlangille]

^ you can do the same in plain javascript without having to load in jQuery

document.addEventListener("DOMContentLoaded", function(event) { 
  // do something
});

[marbuser]

@dmitr11 Could you possibly elaborate on what exactly el.data is?
You pass in the data prop but use it for nothing else except, el.items = el.data.

So could you possibly elaborate on what this data actually is?

[marbuser]

^ you can do the same in plain javascript without having to load in jQuery

document.addEventListener("DOMContentLoaded", function(event) { 
  // do something
});

Hey @quinnlangille
I tried this but it didn't work. It never got triggered in Vue for some reason. :/

Tried both es5 and es6 syntax.

  mounted() {
    document.addEventListener('load', function(event) {
      console.log('event listener');
    });
    document.addEventListener('DOMContentLoaded', event => {
      console.log('event listener');
    });
  },

[quinnlangille]

@marbuser are you getting any JS errors in your console?