vue-carousel: When page is opened image in vue-carousel is not visible. Need to click.

Bug Report

Hello, Working with Laravel 5.7 / Vuejs 2.6 / Bootstrap 4.3 app I use “vue-carousel”: “^0.18.0” I have a problem that defing carousel with images at page opening the page is not visible at all. But if to click on the empty image space then image is visible and carousel works ok. in vue file :


					<div class="pull-left" style="max-width: 350px;">
						<carousel
								v-show="hostelImages.length"
								:centerMode="false"
								:perPage="1"
								:navigationEnabled="true"
								paginationColor="#7e7e7e"
								paginationPosition="bottom"
								class="m-4"
								zIndex= "100 !important"
						>
							<slide v-for="nextHostelImage, index in hostelImages" :key="nextHostelImage.id">
								<img :src="nextHostelImage.filenameData.image_url" :alt="nextHostelImage.filename" style="width:320px; height : auto; ">
								<p class="description-text pl-5 pr-5">
									{{ nextHostelImage.info }}
								</p>
							</slide>
						</carousel>

						<a class="a_link" href="/images/emptyImg.png" v-show="!hostelImages.length">
							<!--{{  "?dt=".time()  }}-->
							<img class="single_vote_image_left_aligned" src="/images/emptyImg.png" alt="alt text">
						</a>
					</div>


    				<p class="card-text mt-3 description-text" v-html="hostelRow.descr"></p>
                    ...

<script>
    import {bus} from '../../../app';
    import appMixin from '../../../appMixin';
    import hostelsMixin from '../../../hostelsMixin';
    import {Carousel, Slide} from 'vue-carousel';

    export default {

        components: {
            Carousel,
            Slide
        },

...
<style scoped lang="css">

   #container {
      padding: 0 60px;
   }

   .VueCarousel-slide {
      position: relative;
      background: #42b983;
      border: 2px dotted green;
      color: #fff;
      font-size: 24px;
      text-align: center;
      min-height: 100px;
   }

   .label {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
   }

</style>

Why error and how to fix it ?

Thanks!

Environment

Babel version(s): [ “vue-carousel”: “^0.18.0” ]
Node/npm version: [ node : v10.15.3, npm : 6.9.0 ]
OS: [ubuntu 18]

Additional context/Screenshots You can look at it live : http://hostels-tours.nilov-sergey-demo-apps.tk/hostel/new-hostel-test21/south-australia/far-north/adelaide-1

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 1
Comments: 18

Most upvoted comments

Hi all! My solution without $forceUpdate(). Use vue-carousel computeCarouselWidth() method.

<carousel
  :perPage="1"
  :paginationEnable="true"
  paginationColor="#b3b3b3"
  paginationActiveColor="#494ce8"
  ref="carousel"
>
  <slide v-for="(slide, index) in product.gallery" :key="index">
    <img :src="slide.img" :alt="slide.name" />
  </slide>
</carousel>

mounted () {
    setTimeout(this.$refs.carousel.computeCarouselWidth, 300)
}

+10

JonikUl on Dec 21, 2019

Hi all. I’ve had the same problem and came up with a “hacky” solution using the imagesLoaded directive from here.

Basically you use the directive to detect if the images have loaded. If they did, use the $forceUpdate function in the imagesLoaded callback to update the carousel accordingly.

Hope this helps!

<template>
    <carousel v-images-loaded="imageLoaded" ref="carousel">
        <slide v-for="(photo, index) in photos" :key="index">
           <img :src="photo.file"/>
        </slide>
    </carousel>
</template>

<script>
    export default {
        methods: {
            imageLoaded() {
                console.log('force load');
                this.$refs.carousel.$forceUpdate()
            },
        },
    }
<script>

kubmin on Aug 30, 2019

I’ve found a hacky workaround for this but I 100% think this issue needs to be fixed properly. My workaround is to call the $forceUpdate() in the mounted hook on a timeout. The timeout should be longer than the time it takes for all of the carousel’s content to load.

mounted() {
    setTimeout(() => {
      this.$forceUpdate()
    }, 4000)
}

This will force the component to re-render. NOTE This does not just re-render the carousel, it re-renders the component in which the vue-carousel is being used. Again, this is not a permanent workaround and I recommend that it is not used in a production environment.

damienmcd on Jul 11, 2019

With just this class my problem was solved:

.VueCarousel {
  width: 100%;
  height: 100%;
}

danialvesb on Jan 17, 2021

I have a same problem, and find some trick. I think the problem is, window doesn’t fire resize event when image loaded.

Try :

var resizeEvent = window.document.createEvent('UIEvents');
resizeEvent.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(resizeEvent);

inside of mounted hook function.

le0park on Jun 24, 2019

Found another one who had the same problem: try: style=“visibility: visible; flex-basis: 522px;”

.VueCarousel-slide { visibility: visible; flex-basis: 100%; width: 100%; }

LouBNielsen on Jun 13, 2019

Hi everyone. I inspected that the carousel which was not visible due to visiblity:hidden style property on the div with class “Vue-carousel-inner”. So I removed it by DOM Manipulation after loading data in carousel.

setTimeout(() => { document.getElementsByClassName("VueCarousel-inner")[0].style.visibility = 'visible' }, 10)

This solved my problem.

Rahulojhaiit on Aug 2, 2021