# Carousel

Carousel component with swipe and arrow navigation.

# Most common usage scenario

<template>
  <SfCarousel :style="{ maxWidth: '1140px', margin: 'auto' }">
    <SfCarouselItem v-for="index in 12">
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          height: 300px;
          background-color: #5ece7b;
          color: #fff;
          font-size: 2.5rem;
        "
      >
        {{ index }}
      </div>
    </SfCarouselItem>
  </SfCarousel>
</template>
<script>
import { SfCarousel } from "@storefront-ui/vue";
export default {
  components: {
    SfCarousel,
  },
};
</script>

# Props

  • settings
    • Carousel options like glide.js (https://glidejs.com/docs/)
    • type: object
    • defaultValue: {}

# Slots

  • prev

    • slot for icon moving to the previous item
    • bindings: go
  • next

    • slot for icon moving to the next item
    • bindings: go
  • default

    • default slot for SfCarouselItem tags

# Events

None.

# CSS modifiers

None.

# CSS custom properties (variables)

  • --carousel-width
  • --carousel-padding
  • --carousel-controls-position
  • --carousel-controls-top
  • --carousel-controls-left
  • --carousel-controls-transform
  • --carousel-controls-display
  • --carousel-controls-justify-content
  • --carousel-controls-width

# Overridden other components CSS variables

  • --carousel-controls-size

You can override CSS variables values bound to this component.

# Internal components

# CarouselItem

# Props

None.

# Slots

  • default

# Events

None.

# CSS modifiers

None.

# CSS variables

None.

# Play with this component

See all available configurations and play with this component on Storybook.