When building data-heavy dashboards, you often need a carousel component that displays multiple items per slide rather than a single element. The el-carousel component from Element Plus can be adapted for this requirement by processing your data into chunked groups before rendering.

Data Partitioning

To display multiple items within one carousel slide, you must first divide your flat data array into smaller chunks. A copmuted property is ideal for this transformation:

const chunkedSlides = computed(() => {
 const chunks = [];
 const itemsPerSlide = 2;
 for (let i = 0; i < sourceData.length; i += itemsPerSlide) {
   chunks.push(sourceData.slice(i, i + itemsPerSlide));
 }
 return chunks;
});

Template Structure

Use a nested rendering approach: the outer loop iterates over the chunked groups to create individual el-carousel-item instances, while the inner loop renders the specific items contained within each slide.

<el-carousel height="172px" arrow="always" indicator-position="none">
 <el-carousel-item v-for="(slide, slideIdx) in chunkedSlides" :key="slideIdx">
   <div class="slide-container">
     <EconomyItem v-for="(entry, entryIdx) in slide" :key="entryIdx" :data="entry" />
   </div>
 </el-carousel-item>
</el-carousel>

Customizing Component Styles

Element Plus components use scoped styles that often require the :deep() selector to override internal class properties. To customize the navigation arrows and indicator buttons:

<style scoped>
/* Customize arrow positioning and icons */
:deep(.el-carousel__arrow--left) { left: -10px; }
:deep(.el-carousel__arrow--right) { right: -3px; }

:deep(.el-carousel__arrow i) {
 width: 13px;
 height: 16px;
 background-size: contain;
}

:deep(.el-carousel__arrow--left i) { background-image: url('@/assets/left-arrow.png'); }
:deep(.el-carousel__arrow--right i) { background-image: url('@/assets/right-arrow.png'); }
:deep(.el-icon svg) { opacity: 0; }

/* Customizing pagination indicators */
:deep(.el-carousel__button) {
 width: 15px;
 height: 3px;
 background-color: #00bdff;
 border-radius: 2px;
}
</style>