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`)" } ] }),
Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I'm unable to show other images in slider. Is it beacuase of image size? @Blackraspberryyy
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
I used v-slide-group and compressed image upto 8kb still unable to display image @Blackraspberryyy
If your image comes from a local directory, you can look into this. Also, I suggest to have a fixed width to your <v-img/> by using the width attribute. I've updated my codesandbox to have a width attribute to v-img
When I changes code like above, still its not working. @Blackraspberryyy
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.