How to stop rendering a vue carousel component after all it's data is shown

by

As title says, I want to stop rendering a vue carousel component after it’s data is shown or after x seconds. I haven’t found any related information about this. I know it’s quite… weird to do this, but still I want to know how to, for some projects. Here’s the code:

        <div class="col-md-12 col-sm-12 col latest-news max-width">
              <carousel
                :per-page="1"
        :mouse-drag="false"
        :autoplay="true"
        :paginationEnabled="false"
        :loop="true"
        :speed="1500"
        :autoplayTimeout="7000"
      >
        <slide v-for="post in posts_1" :post="post" :key="post.id">
          <NewsTitle class="most-important" :post="post" :key="post.id" />
        </slide>
      </carousel>
    </div>

73 thoughts on “How to stop rendering a vue carousel component after all it's data is shown”

  1. Is this what do you need?

    <template>
    <carousel
        v-if="showCarousel"
        ...
    >
        ...
    </carousel>
</template>

<script>
export default {
    data: function(){
        return {
            showCarousel: true,
        }
    },
    methods: {
        hideCarousel: function(){
            setTimeout(() => {
                this.showCarousel = false;
            }, 5000);
        }
    },
    created: function(){
        this.hideCarousel();
    }
}
</script>

    If you want to hide your carousel you should be dependent on showCarousel variable. Also you need to add condition v-if="showCarousel" to your carousel tag. My code should hide carousel after 5000 milliseconds or 5 seconds.

    Reply

Leave a Comment