How to make a carousel with multiple images in Vuetify?
I found the following workaround:
<v-carousel>
<v-carousel-item :key="i" v-for="i in 5">
<v-layout row>
<v-flex xs4 :key="j" v-for="j in 3">
<img :src="'https://placehold.it/380x500/?text=' + i + '-' + j" alt="">
</v-flex>
</v-layout>
</v-carousel-item>
</v-carousel>
But it scrolls a group of images at once. See the demo.
UPDATE: You can use Vue2-Siema, which is a Vue 2 wrapper for Siema - a lightweight carousel library. See the demo.
If you want a more fine-grained control over the look and functionality of your carousel (touch, speed, momentum, number of images per slide, responsive behavior ...), and don't want to implement it from scratch, I recommend you use Vue-Awesome-Swiper as a Vue plugin and stay away from Vuetify when it comes to carousels and image galleries, at least until it's more complete in that regard.
Vue-Awesome-Swiper in a thin vue wrapper around the very powerful Swiper.js library which is, by it's own developers words:
The most modern mobile touch slider with hardware accelerated transitions
Here's the screenshot of a carousel with multiple images:
(Codepen demo)
and here's the screenshot of an image gallery with thumbs:
(Codepen demo)
Here's a code snippet for the first screenshot:
Vue.use(VueAwesomeSwiper);
new Vue({
el: "#app",
data: () => ({
swiperSlides: [
"pink",
"red",
"yellow",
"purple",
"green",
"orange",
"blue"
],
swiperOption: {
initialSlide: 0,
slidesPerView: 4,
spaceBetween: 20,
freeMode: true,
watchOverflow: true,
breakpoints: {
1904: {
slidesPerView: 4,
spaceBetween: 20
},
1264: {
slidesPerView: 4,
spaceBetween: 20
},
960: {
slidesPerView: 4,
spaceBetween: 50
},
600: {
slidesPerView: 3,
spaceBetween: 150
},
400: {
slidesPerView: 2,
spaceBetween: 150
}
},
pagination: {
el: ".swiper-pagination",
clickable: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
}
}),
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
mounted() {
// current swiper instance
this.swiper.slideTo(3, 1000, false);
},
methods: {
callback() {
//read the API docs to see which slider events are available
}
}
});<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-awesome-swiper.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet" />
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app>
<v-container>
<v-card id="product">
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- slides -->
<swiper-slide v-for="(slide, index) in swiperSlides" :key="index">
<v-avatar tile="tile" size="150px" :color="slide">
<img src="https://www.dropbox.com/s/a8813qmu9f5yixz/shoe_left.png?raw=1">
</v-avatar>
</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</v-card>
</v-container>
</v-app>
</div>If you're using the vue-cli, you import Vue-Awesome-Swiper in your main js file and register it as a Vue plugin, as you would with Vuetify:
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
Vue.use(VueAwesomeSwiper);
I hope it helps.