coreui-vue - Vue Carousel not runs automatically?

Question

I have used coreui-vue for the project, but the problem is with the carousel, a carousel isn’t started on page mount, interesting interval slide run’s when I resize screen size from inspecting elements, what is the problem?

Page:

<template>
  <CCarousel v-if="isLoaded" :interval="4000" transition="crossfade">
    <CCarouselItem :interval="4000">
      <img
        class="d-block w-100"
        src="https://coreui.io/vue/docs/4.0/images/vue.jpg"
        alt="slide 1"
      />
    </CCarouselItem>
    <CCarouselItem :interval="4000">
      <img
        class="d-block w-100"
        src="https://coreui.io/vue/docs/4.0/images/react.jpg"
        alt="slide 2"
      />
    </CCarouselItem>
    <CCarouselItem :interval="4000">
      <img
        class="d-block w-100"
        src="https://coreui.io/vue/docs/4.0/images/angular.jpg"
        alt="slide 3"
      />
    </CCarouselItem>
  </CCarousel>
</template>

<script>
import { CCarousel, CCarouselItem } from "@coreui/vue";
export default {
  components: {
    CCarousel,
    CCarouselItem,
  },
  data() {
    return {
      isLoaded: false,
    };
  },
  mounted() {
    this.isLoaded = !this.isLoaded;
  },
};
</script>

https://lh3.googleusercontent.com/cp4vwSeZMeb3MgIu1MeBcxUVyny46x6BW9CeUnWA4ex6jPYowGB_5jlrk21Mz6QGPpd0AvkWRR5fE6Uvek9p=w2880-h1592

JoaoFCarvalho · Accepted Answer · 2022-08-26 08:41:36Z

0

I had the same problem. Adding pause="false" solved my issue:

<template>
  <CCarousel v-if="isLoaded" :interval="4000" transition="crossfade" pause="false">
    <CCarouselItem :interval="4000">
      <img
        class="d-block w-100"
        src="https://coreui.io/vue/docs/4.0/images/vue.jpg"
        alt="slide 1"
      />
    </CCarouselItem>
    <CCarouselItem :interval="4000">
      <img
        class="d-block w-100"
        src="https://coreui.io/vue/docs/4.0/images/react.jpg"
        alt="slide 2"
      />
    </CCarouselItem>
    <CCarouselItem :interval="4000">
      <img
        class="d-block w-100"
        src="https://coreui.io/vue/docs/4.0/images/angular.jpg"
        alt="slide 3"
      />
    </CCarouselItem>
  </CCarousel>
</template>

[1] [1]: https://coreui.io/vue/docs/components/carousel.html#ccarousel

answered Aug 26, 2022 at 8:41

JoaoFCarvalho

1766 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

coreui-vue - Vue Carousel not runs automatically?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related