Carousel - Change Class of Slide Method?



  • 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!



  • 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 }
            }
          }
        }
    


  • @benoitranque

    Awesome!

    How to do it without a switch statement?

    Thank you so much…I really appreciate your help 🙂



  • 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
        }
      }
    }
    


  • Great, thanks again 🙂 !!!