1

I'm trying to show multiple images in a slider per page using vuetify as well as Vue-awesome-swiper but doesnot work . Please help me.

     <v-sheet class="mx-auto" elevation="8" max-width="100%">
      <v-slide-group multiple show-arrows>
        <v-slide-item v-for="(n, i) in images" :key="i" v-slot:default="{ active, toggle }">
          <v-img :src="n.src" class="ma-4" height="250" width="300"/>
     
        </v-slide-item>
      </v-slide-group>
    </v-sheet>

  data: () => ({
     images: [
      { alt: "A kitten", src: "require(`@/assets/images/workplan.jpg`)" },
      { alt: "A kitten", src: "require(`@/assets/images/workplan.jpg`)" },
      { alt: "A kitten", src: "require(`@/assets/images/workplan.jpg`)" },    
      { alt: "A kitten", src: "require(`@/assets/images/workplan.jpg`)" }
    ]
  }),
prabina sht
  • 217
  • 3
  • 12

1 Answers1

2

Here's what I've noticed in your code:

  1. It should be :src="n.src" and not @src="{{ n.src }}". @ is short for v-on whereas : is short for v-bind. What we need is v-bind:src and there is no such thing as v-on:src as far as I know.
  2. Provide a proper :key to each <v-slide-item/>. Avoid using non-primitive value for key.
  3. Use Vuetify's <v-img/> component over <img/> tags.

enter image description here

Here's a demo.

Blackraspberryyy
  • 2,016
  • 2
  • 11
  • 22
  • I'm unable to show other images in slider. Is it beacuase of image size? @Blackraspberryyy – prabina sht Sep 16 '20 at 05:59
  • It might be the case. Try wrapping the image in a div or a v-card with fixed width similar to the [vuetify's example](https://vuetifyjs.com/en/components/slide-groups/#multiple) – Blackraspberryyy Sep 16 '20 at 06:19
  • I used v-slide-group and compressed image upto 8kb still unable to display image @Blackraspberryyy – prabina sht Sep 16 '20 at 07:17
  • If your image comes from a local directory, you can look into [this](https://stackoverflow.com/a/53411531/9183405). Also, I suggest to have a fixed width to your `` by using the [width attribute](https://vuetifyjs.com/en/components/images/#api). I've updated my codesandbox to have a width attribute to v-img – Blackraspberryyy Sep 16 '20 at 08:32
  • When I changes code like above, still its not working. @Blackraspberryyy – prabina sht Sep 17 '20 at 02:14
  • You shouldn't make the `src` a string. It should be something like this: `src: require('@/assets/images/workplan.jpg')`. Check my updated codesandbox that uses require(). – Blackraspberryyy Sep 17 '20 at 02:48