First image doesnt get the --active class unless i click something in carousel

[vasilistotskas]

Hello , i noticed that the first image doesn't get active unless i click on arrow , navigation or somewhere inside carousel section . images bellow : first image is when i refresh the page , second is when i click on carousel .

.

[umbra-sh]

Any updates on this? same issue here

[afrazahmmad]

Facing same issue

[afrazahmmad]

I had to do this manually to add active class on first slide. But we still have to click twice on next arrow to change the slide.

 let elem_  = document.querySelector('.carousel__pagination').firstElementChild.firstElementChild;
    if (elem_ && !elem_.classList.contains('carousel__pagination-button--active')){
        elem_.classList.add('carousel__pagination-button--active');
    }

[ValeryZheleznov]

I'm facing the same issue for several weeks. Trying to find a walkaround before it will be resolved. I presume the problem is in "undefined" default value for the "modelValue" prop. See line 80 in the Carousel component: https://github.com/ismail9k/vue3-carousel/blob/master/src/components/Carousel.ts

Is there any ideas how to change it in mounted() hook?

[ValeryZheleznov]

Got it!

mounted() { let buttonsNext = document.getElementsByClassName('carousel__next'); if (buttonsNext.length > 0) { buttonsNext.item(0).click(); } },

Works for me. Hope this will help

[umbra-sh]

There seems to be some problem with variable naming from .25 onwards. Forcing the version to 0.1.24 (on package.lock/yarn.lock) solved the issue for me.

[ferlobo1985]

There seems to be some problem with variable naming from .25 onwards. Forcing the version to 0.1.24 (on package.lock/yarn.lock) solved the issue for me.

Yes, rolling back to 0.1.24, seems to fix the issue ( 0.1.27 ) now.

[sunscreem]

Just to confirm - locking to 0.1.24 fixes things for me too.