Vue-carousel: Bug: Slides not showing before I try to advance carousel

[VicoErv]

Bug Report

Current Behavior
at initial load it will be blank, but after i try to slide using mouse the image shown all

Input Code and steps to reproduce

<div v-if="media.params.mediaType == 8">
  <carousel :perPage="1">
    <slide v-for="image in media.params.images" :key="image[0].url">
      <img :src="image[0].url">
    </slide>
  </carousel>
</div>

Expected behavior/code
it should shown at initial load

Environment

• npm 8 lts
• os arch linux
• electron vue

[evgen3]

@VicoErv
same problem, decided so:
http://joxi.ru/l2ZNeJWuw6jNk2

[dragonH]

Same here

as you can see

it has got the data from server and start autoplay

but it turned out to be blank

notice that the style "visibility" in element is initial hidden

no idea why

Same

the element show normally after i slide it

[Gytisla]

Same here, but only with 'loop=true'

[quinnlangille]

Hey guys, this sounds like a similar issue to #138, which was reported as resolved. Can anyone confirm if it's the same behavior? If so, I'll move this to a bug fix. In the meantime, if it is the same issue, there are some workarounds in that thread :octocat:

[dragonH]

@quinnlangille

i follow the solution in #138

and it slides normally

thx!

here is what i added

    mounted() {
        setTimeout(() => {
            this.$refs['carousel'].onResize();
            this.$refs['carousel'].goToPage(0);
        }, 1000);
    }

[quinnlangille]

@dragonH, great! However, this would suggest that the problem isn't _actually_ resolved. I'll mark this as a bug and investigate when I get a chance. If anyone else finds a solution feel free to post here!

[Gytisla]

Hey guys, this sounds like a similar issue to #138, which was reported as resolved. Can anyone confirm if it's the same behavior? If so, I'll move this to a bug fix. In the meantime, if it is the same issue, there are some workarounds in that thread :octocat:

Hi. There is some other problem for me, i think. When the carousel component is mounted, on "VueCarousel-inner" it sets 'translate(1110px, 0px);', which only changes if i click anywhere on a carousel component. This happens only when "loop=true" is set.

Workaround for now:

mounted() {
     let carou = this.$refs['carousel'];
     carou['offset'] = '0';
}

[VicoErv]

i was use the component with loop attribute set to false, but i will try that solution first. :+1:

[quinnlangille]

Hey @Gytisla, great find! That definitely shouldn't be happening. Anyone feel like making a PR for the fix?