UI Options

Built-in arrow nav

Slide 1

<ssr-carousel show-arrows>
  <slide :index='1'></slide>
  <slide :index='2'></slide>
  <slide :index='3'></slide>
</ssr-carousel>

Replace the icons through slots

Slide 1

<ssr-carousel show-arrows>

  <template>
    <slide :index="1"></slide>
    <slide :index="2"></slide>
    <slide :index="3"></slide>
  </template>

  <template #back-arrow="{ disabled }">
    Back {{ disabled ? "(Disabled)" : "" }}
  </template>

  <template #next-arrow="{ disabled }">
    Next {{ disabled ? "(Disabled)" : "" }}
  </template>
</ssr-carousel>

Built-in dot pagination nav

Slide 1

<ssr-carousel show-dots>
  <slide :index="1"></slide>
  <slide :index="2"></slide>
  <slide :index="3"></slide>
</ssr-carousel>

Per-slide pagination

Slide 1

Slide 2

<ssr-carousel
  show-arrows
  show-dots
  paginate-by-slide
  :slides-per-page="2"
  :gutter="20"
>
  <slide :index="1"></slide>
  <slide :index="2"></slide>
  <slide :index="3"></slide>
  <slide :index="4"></slide>
  <slide :index="5"></slide>
  <slide :index="6"></slide>
</ssr-carousel>

Disable dragging

Also, you can use the no-drag prop to disable dragging.

Slide 1

<ssr-carousel no-drag show-arrows>
  <slide :index="1"></slide>
  <slide :index="2"></slide>
  <slide :index="3"></slide>
</ssr-carousel>