<markdown>
# 居中

设定 `centered-slides` 来将所有的 `slide` 居中显示，这仅在 `effect` 为 `slide` 以及 `card` 的时候有用。
</markdown>

<template>
  <n-carousel
    :space-between="30"
    :loop="false"
    slides-per-view="auto"
    centered-slides
    draggable
  >
    <n-carousel-item style="width: 30%">
      <img
        class="carousel-img"
        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
      >
    </n-carousel-item>
    <n-carousel-item style="width: 20%">
      <img
        class="carousel-img"
        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
      >
    </n-carousel-item>
    <n-carousel-item style="width: 30%">
      <img
        class="carousel-img"
        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
      >
    </n-carousel-item>
    <n-carousel-item style="width: 40%">
      <img
        class="carousel-img"
        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
      >
    </n-carousel-item>
  </n-carousel>
</template>

<style>
.carousel-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
</style>
