ImageSlider 图片轮播组件使用指南

本文介绍如何在博客中使用 ImageSlider 组件创建图片轮播展示。

基础轮播

壮丽的山峰景色

宁静的森林小道

清澈的湖泊倒影

无自动播放

数据可视化图表

商业数据分析

使用方式

import { ImageSlider } from '@/components/mdx';

<ImageSlider
  images={[
    {
      src: "图片URL",
      alt: "图片描述",
      caption: "图片标题"
    },
    // 更多图片...
  ]}
  autoplay={true}
  showPagination={true}
  showNavigation={true}
/>

参数说明

参数	类型	默认值	说明
images	ImageItem[]	必填	图片数组
autoplay	boolean	false	是否自动播放
showPagination	boolean	true	是否显示分页指示器
showNavigation	boolean	true	是否显示导航箭头