如何在Vuetify中制作包含多个图像的轮播？

Question

我想制作一个包含多个图像的轮播，如下所示：

它应该在单击箭头时滑动单个图像。

有一个功能请求，但是如何实现直到它被修复？

Answer 1

如果您想要对轮播的外观和功能进行更细粒度的控制 （触摸、速度、动量、每张幻灯片的图像数量、响应行为...），并且不想从头开始实现它，我建议您使用 Vue-Awesome-Swiper 作为 Vue 插件并远离在轮播和图片库方面使用 Vuetify，至少在这方面更加完善之前。

Vue-Awesome-Swiper 在一个薄的 vue 包装器中，围绕着非常强大的 Swiper.js 库，用它自己的开发人员的话来说：

最现代的移动触摸滑块，具有硬件加速过渡功能

这是包含多个图像的轮播的屏幕截图：

（Codepen 演示）

这是带有拇指的图片库的屏幕截图：

（Codepen 演示）

这是第一个屏幕截图的代码片段：

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>

如果您使用的是 vue-cli，则可以在主 js 文件中导入 Vue-Awesome-Swiper 并将其注册为 Vue 插件，就像使用 Vuetify 一样：

import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
Vue.use(VueAwesomeSwiper);

希望有帮助。

Answer 2

我找到了以下解决方法：

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

但它会同时滚动一组图像。请参阅 演示。

更新：您可以使用Vue2-Siema，它是Siema的Vue 2包装器 - 一个轻量级轮播库。请参阅 演示。

Answer 3

使用幻灯片组：

https://vuetifyjs.com/en/components/slide-groups/#usage

与

v-window

组件类似，

v-slide-group

允许项目占用所需的空间，从而允许用户在提供的信息中水平移动。