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

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="col-sm-12">

                    <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>

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

Why error and how to fix it ?

Thanks!

PetroGromovo

6 years ago

Level 5

Searching for a decision I found vue-focus directive. I installed it to my app and checking it on simple text input I see that it works ok. I tried to use it in carousel component as :

                    <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; "
                                    v-focus.lazy="true"
                            >
                            <p class="description-text pl-5 pr-5">
                                {{ nextHostelImage.info }}
                            </p>
                        </slide>
                    </carousel>

                    <carousel
                            v-show="hostelImages.length"
                            :centerMode="false"
                            :perPage="1"
                            :navigationEnabled="true"
                            paginationColor="#7e7e7e"
                            paginationPosition="bottom"
                            class="m-4"
                            zIndex= "100 !important"
                            v-focus.lazy="true"
                    >
                        <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>

But in both cases I do not see images on page opened.

If there is a way to simulate click of a mouse on carousel's image?
Testing in browser I noticed that when I change device in browse I see that my carousel's image becomes visible. Can that be decision for my problem ?

Please or to participate in this conversation.