Vue-carousel: Initial Active Slide has no active class

[gameofgnomes]

When the slider is initialised, the VueCarousel-slide-active class isn't added to the first visible slide. Only when navigating through the slider does it then get added.

[quinnlangille]

Hey @gameofgnomes, good catch! I'll flag this as a bug, should be a quick fix for whoever wants to take it on :rocket:

[mcipenuks]

any updates on this?

[quinnlangille]

Hey @mcipenuks, this was fixed by @nandaleite in her latest pr linked above. Thanks for reminding me to close! If you roll up to the newest version of the carousel, this will be resolved :octocat:

[nandaleite]

Hi @quinnlangille, I closed my last PR because my solution was breaking the tests and probably affecting other functions. My bad. Unless someone else sent another PR, this issue remains unsolved.

[joelabeyta]

I have a little workaround that might help with this. I use a method to add the appropriate class on update:

import Vue from 'vue';
import { Carousel, Slide } from 'vue-carousel';

const sliderEl = document.querySelector('#cw_ss');
if (sliderEl) {
    new Vue({
        el: sliderEl,
        components: {
            'carousel': Carousel,
            'slide': Slide
        },
        template:`<div class="cw-slideshow">
                <carousel
                    :perPage="1"
                    :autoplay="true"
                    :loop="true"
                    :autoplayTimeout="5000"
                    :navigationEnabled="false"
                    :paginationEnabled="true"
                >
                    <slide v-for="(img, i) in slides" :key="i">
                        <img v-bind:src="img.src" v-bind:alt="img.alt" />
                    </slide>
                </carousel>
        </div>`,
        data: {
            slides: {},
        },
        mounted: function () {
            this.getSlides();
        },
        updated: function () {
            this.setFirstSlideActive();
        },
        methods: {
            getSlides: function () {
                             // build slides array however you prefer
            },
            setFirstSlideActive: function () {
                const slides = document.querySelectorAll('.VueCarousel-slide');
                if (slides.length) {
                    const firstSlide = slides[0];
                    const className = 'VueCarousel-slide-active';

                    if (firstSlide.classList) {
                        firstSlide.classList.add(className);
                    } else {
                        firstSlide.className += ' ' + className;
                    }
                }
            }
        }
    });
}

[gbrlcardozo]

anyone have any updates on this?

[michisp]

There is still no fix, but an easy workaround.

<carousel :perPage="1" :paginationEnabled="false" @pageChange="initialLoad = false">
  <slide v-for="(ticket, index) in tickets"
         :key="ticket.start + index"
         :class="{ 'VueCarousel-slide-active': index === 0 && initialLoad}">
    <div class="ticket">
      Content
    </div>
  </slide>
</carousel>

<script>
import { mapState } from 'vuex';

export default {
    data() {
        return {
            initialLoad: true,
        }
    },
    computed: {
        ...mapState('user', ['tickets']),
    },
};
</script>

Set the "VueCarousel-slide-active" class yourself for the items you want and if initialLoad is true. You can hook in the carousel @pageChange to change this variable to false, so vue-carousel takes care of this class again