在 Vue 中实现「每次显示四个元素」的轮播效果,可以通过以下组件实现(推荐按优先级排序):
1. Swiper + Vue-Awesome-Swiper(推荐)
特点:
- 最成熟的轮播库,支持复杂交互(触摸滑动、自动播放、分页器)
- 原生适配 Vue 3/2,文档完善
- 完美支持「一屏四元素」布局
安装:
npm install swiper vue-awesome-swiper
代码示例:
<template>
<swiper
:slides-per-view="4"
:space-between="20"
:loop="true"
:autoplay="{ delay: 3000 }"
>
<swiper-slide v-for="(item, index) in items" :key="index">
<div class="slide-content">
<!-- 你的内容(如图片+文字) -->
<img :src="item.image" />
<h3>{{ item.title }}</h3>
</div>
</swiper-slide>
</swiper>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {
components: { Swiper, SwiperSlide },
data() {
return {
items: [...] // 你的数据
}
}
}
</script>
<style>
.swiper-container {
padding: 20px 0; /* 两侧留白 */
}
.slide-content {
width: 300px; /* 控制单个元素宽度 */
}
</style>
2. vue-carousel
特点:
- 轻量级轮播组件,API 简单
- 原生支持多项目显示
- 适合快速实现基础需求
安装:
npm install vue-carousel
代码示例:
<template>
<carousel :perPage="4" :paginationEnabled="false">
<slide v-for="(item, index) in items" :key="index">
<div class="slide-item">
<img :src="item.image" />
<h3>{{ item.title }}</h3>
</div>
</slide>
</carousel>
</template>
<script>
import { Carousel, Slide } from 'vue-carousel'
export default {
components: { Carousel, Slide },
data() {
return {
items: [...] // 你的数据
}
}
}
</script>
3. Element UI / Ant Design Vue 内置轮播
特点:
- 适合已使用 Element UI 或 Ant Design 的项目
- 需通过 CSS 自定义实现「四元素布局」
Element UI 示例:
<template>
<el-carousel :interval="3000" indicator-position="none" height="200px">
<el-carousel-item v-for="(group, index) in chunkedItems" :key="index">
<div class="carousel-group">
<div v-for="item in group" :key="item.id" class="item">
<img :src="item.image" />
<h3>{{ item.title }}</h3>
</div>
</div>
</el-carousel-item>
</el-carousel>
</template>
<script>
export default {
computed: {
chunkedItems() {
// 将数组每4个分为一组
return this.items.reduce((result, item, index) => {
const chunkIndex = Math.floor(index / 4)
if (!result[chunkIndex]) result[chunkIndex] = []
result[chunkIndex].push(item)
return result
}, [])
}
}
}
</script>
<style>
.carousel-group {
display: flex;
gap: 20px;
}
.item {
flex: 1;
min-width: 200px;
}
</style>
4. 纯 CSS 实现(适合简单需求)
核心思路:
- 使用
display: flex
+overflow-x: auto
实现横向滚动 - 通过
scroll-snap
控制滚动吸附效果
代码示例:
<template>
<div class="carousel-container">
<div class="carousel-track">
<div v-for="(item, index) in items" :key="index" class="slide">
<img :src="item.image" />
<h3>{{ item.title }}</h3>
</div>
</div>
</div>
</template>
<style>
.carousel-container {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.carousel-track {
display: flex;
gap: 20px;
padding: 0 20px;
}
.slide {
flex: 0 0 calc(25% - 15px); /* 四列布局 */
scroll-snap-align: start;
}
</style>
选择建议
- 推荐方案:使用
Swiper + Vue-Awesome-Swiper
,功能最全且支持响应式断点配置 - 轻量替代:
vue-carousel
适合简单场景 - UI 框架整合:若项目已使用 Element UI / Ant Design,优先用其内置组件
- 移动端优化:确保添加
touch
事件支持和滚动惯性效果