Bug: `VueCarousel-slide-active` is not added as a class to the first slide on initial load

[ckhatton]

Bug Report

I have found that VueCarousel-slide-active is not added as a class to the first slide on initial load. So I had to add this below to my component script after applying a dynamic "id" to each slide (I couldn't use $refs as the slides are printed out using a v-for loop).

export default {
//...
  mounted: function() {
    document.getElementById('VueCarousel-slide-0').classList.add('VueCarousel-slide-active');
  }
//...
}

Without this it means that one cannot target the active slide with personalised styling until the slide is interacted with.

Environment

• Node/npm version: Node v11.1.0/npm 6.14.3
• OS: OSX 10.14.6

Referenced originally in Issue #223.

:octocat:

[gbrlcardozo]

didn't work for me :/

[ckhatton]

My work around @gbrlcardozo?

You have to make sure you add the corresponding ID 'VueCarousel-slide-0' to the first slide component. If the slide component is part of a v-for loop, then you can add something like :id="'VueCarousel-slide-' + index".

[joeswann]

Slightly tidier version for anyone running into this, noticing it doesn't prevent the translate when dragging on mobile though.

Step 1: Add ref="slide" to <slide>

Step 2: Add following to component

mounted() {
  this.$nextTick(() => {
    this.$refs.slide[0].$el.classList.add('VueCarousel-slide-active');
  });
},

[jasonbodily]

Even after doing this, navigating the first time doesn't remove the slide-active class from the first slide. This is unexpected functionality.