Carousel - Change Class of Slide Method?

[joefly]

I’m experimenting with the q-carousel component, and I’m implementing the @slide method to change the class of the slide using a switch statement like so:

    <q-carousel arrows dots fullscreen class="text-white" @slide="moveSlide">
      <div slot="slide" :class="slideClass" v-for="n in 12">
        Slide {{n}}
      </div>
    </q-carousel>

    data: () => ({
      slideClass: 'bg-primary'
    }),

    methods: {
      moveSlide (index, direction) {
          switch (index % 3) {
          case 0:
            this.slideClass = 'bg-primary'
            break
          case 1:
            this.slideClass = 'bg-secondary'
            break
          default:
            this.slideClass = 'bg-tertiary'
        }
      }
    }

Is there a more modern way of doing this that doesn’t use a switch statement?

Thanks for the help!

[benoitranque]

There are multiple ways to do this:

    <q-carousel arrows dots fullscreen class="text-white">
      <div slot="slide" class="bg-primary">
        Slide 1, not using v-for
      </div>
      <div slot="slide" :class="{'bg-primary': n === 0 , 'bg-primary': n === 2, 'bg-tertiary': n >= 3 ,}" v-for="n in 12">
        Slide {{n}}
      </div>
      <div slot="slide" :class="slideClass(index)" v-for="(n, index) in 12">
        Slide {{n}}
      </div>
    </q-carousel>

   methods: {
      slideclass(index) {
          // could also do this without switch statement. Note the format of the class object: { 'clasname-in-quotes': true } // or expression evaluating to true.
          switch (index % 3) {
          case 0:
            return { 'bg-primary': true }
            break
          case 1:
            return { 'bg-secondary': true }
            break
          default:
            return { 'bg-tertiary': true }
        }
      }
    }

[joefly]

@benoitranque

Awesome!

How to do it without a switch statement?

Thank you so much…I really appreciate your help

[benoitranque]

As you can see I posted three different ways of achieving it, which one you use should really depend on your criteria and use case. here is another eample:

      <div slot="slide" :class="slideClass(slide, index)" v-for="(slide, index) in slides">
        Slide {{slide.title}}
      </div>

data () {
  return {
    slides: [
      {
        title: 'this slide is awesome!',
        type: 'primary', // this slide is primary
      }
      // more slides here
    ]
  }
},
methods: {
  slideclass (slide, index) {
    return {
      'bg-primary': slide.type === 'primary', // this class will activate is slide is of type primary
      'bg-secondary': slide.type !== 'primary', // activates if not
      'text-magenta': !(index % 2),  // activates on even slide indexes
      'text-bold': index === 0 // first slide
    }
  }
}

[joefly]

Great, thanks again !!!