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

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>

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