vuetify.js - 如何在 Vuetify 中制作带有多个图像的轮播?
解决方案
如果您想对轮播的外观和功能进行更细粒度的控制(触摸、速度、动量、每张幻灯片的图像数量、响应行为......),并且不想从头开始实现它,我建议您将Vue-Awesome-Swiper用作 Vue 插件,并在轮播和图像画廊方面远离 Vuetify,至少在它在这方面更加完整之前。
Vue-Awesome-Swiper 是一个轻薄的 vue 包装器,围绕着非常强大的Swiper.js库,用它自己的开发人员的话来说:
具有硬件加速转换的最现代的移动触摸滑块
这是带有多个图像的轮播的屏幕截图:
这是带有拇指的图片库的屏幕截图:
这是第一个屏幕截图的代码片段:
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/vue-awesome-swiper@3.1.2/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);
我希望它有所帮助。
推荐阅读
- javascript - 在 Sequelize 中使用 AND 操作与多对多关系
- bootstrap-4 - 如何在不同的屏幕尺寸上格式化特定的填充/边距规则?
- javascript - 没有在窗口中打开弹出窗口
- wpf - Visual Studio 16.8 刚刚禁止在 WPF Core 3.1 应用程序中使用控制台?
- c# - 如何将 maxValue 分配给十进制类型的 DataTable 列?(C#)
- python - 语法解释 - pygame.event.get() 是字典吗?
- c# - msal 集成 Windows 身份验证 + 用于设备身份验证的条件访问策略
- python - 用机器学习(python)猜测两个相乘的值的输出
- r - 从 stprl 在列中插入名称
- performance - Payara 与 Glassfish 的表现