@vueimple/carousel

Simple single carousel component

Features

• Autoplay
• Multiple slides
• Breakpoints
• Drag and touch slide change (please set draggable=false for your images to avoid not-allowed cursor)

Options

| Option | Type | Default | Description | |---------------|------------------------------------|----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------| | animation | string | 'linear' | animation easing name. "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)" | | arrows | boolean | true | is show arrows | | arrowsOutside | boolean | false | is arrows outside of carousel | | autoplay | number | 2000 | animation intervals in milliseconds | | dots | boolean | true | is show dots | | dotsOutside | boolean | true | is dots outside of carousel | | draggable | boolean | true | allow change slides by drag or touch | | duration | number | 500 | animation duration in milliseconds | | gap | string | '10px' | gap between slides when more than one slide per page | | infinite | boolean | true | enable infinite slides change. If infinite disabled, left arrow wouldn't show on the first slide and right arrow wouldn't show on the last slide | | responsive | Record<string, ResponsiveSettings> | {} | responsive settings where property is valid media query min-width value. See below | | slidesPerPage | number | 1 | number of slides per page to show |

Responsive options

All properties are optional

| Option | Type | Description | |---------------|---------|------------------------------------------------------| | arrows | boolean | is show arrows | | arrowsOutside | boolean | is arrows outside of carousel | | autoplay | boolean | animation intervals in milliseconds | | dots | boolean | is show dots | | dotsOutside | boolean | is dots outside of carousel | | draggable | boolean | allow change slides by drag or touch | | gap | string | gap between slides when more than one slide per page | | slidesPerPage | number | number of slides per page to show |

Example

{
    autoplay: 0,
    arrowsOutside: true,
    dotsOutside: false,
    slidesPerPage: 3,
    gap: '20px',
    responsive: {
      800: {
        autoplay: 0,
        slidesPerPage: 1,
        gap: '10px'
      }
    }
  }
}

Methods

• next - go to next slide
• prev - go to previous slide
• goTo(index: number) - go to {index} slide
• start - start animation
• stop = stop animation

Events

• change - fires before slide change

Slots

| Name | Description | Parameters | |------|----------------|--------------------------| | prev | previous arrow | | | next | next arrow | | | dots | navigation | current-slide, is-active |