
import CssTable from '../../components/CssTable'
import Demo from '../../components/demo/carousel/index.mdx'

## 默认类名表格
  
<CssTable name="carousel" />
  
## 样例
  
<Demo></Demo>
  
## Css 结构


### Base

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Base Schema</span>
</div>
<div class="collapse-content"> 

```css
.carousel {
  @apply inline-flex overflow-x-scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.carousel-vertical {
  @apply flex-col overflow-y-scroll;
  scroll-snap-type: y mandatory;
}
.carousel-item {
  @apply box-content flex flex-none;
  scroll-snap-align: start;
}
.carousel-center .carousel-item {
  scroll-snap-align: center;
}
.carousel-end .carousel-item {
  scroll-snap-align: end;
}

```

</div>
</div>



### Styled

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Styled Schema</span>
</div>
<div class="collapse-content"> 

```css
.carousel {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar {
  @apply hidden;
}

```

</div>
</div>



### Utils

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Utils Schema</span>
</div>
<div class="collapse-content"> 

```css

```

</div>
</div>



