https://github.com/arfedulov/vue-carousel-generic

Generic vue carousel component which makes minimum assumptions on appearance. It just provides the core carousel functionality.
https://github.com/arfedulov/vue-carousel-generic

carousel vue

Last synced: 30 days ago
JSON representation

Generic vue carousel component which makes minimum assumptions on appearance. It just provides the core carousel functionality.

• Host: GitHub
• URL: https://github.com/arfedulov/vue-carousel-generic
• Owner: arfedulov
• License: mit
• Created: 2020-09-30T20:31:48.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-09-28T12:14:39.000Z (over 3 years ago)
• Last Synced: 2024-11-17T16:12:04.472Z (about 2 months ago)
• Topics: carousel, vue
• Language: JavaScript
• Homepage:
• Size: 280 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-carousel-generic

Generic vue carousel component which makes minimum assumptions on appearance. It just provides the core carousel functionality.

## Installation:

```

npm i vue-carousel-generic

```

## Usage example:

```html

  


    
Example

    

      

        
{{ item }}

      

    

    ⟨

    ⟩

  


import VueCarousel from "vue-carousel-generic";

export default {

  components: { VueCarousel },

  data() {

    return {

      items: [

        "0",

        "1",

        "2",

        "3",

        "4",

        "5",

        "6",

        "7",

        "8",

        "9",

        "10",

        "11",

        "12"

      ],

      current: 0

    };

  },

  methods: {

    updateCurrentItem(dir) {

      const newPos = this.current + dir;

      if (dir < 0) {

        this.current = newPos >= 0 ? newPos : 0;

        return;

      }

      this.current =

        newPos < this.items.length ? newPos : this.items.length - 1;

    }

  }

};

```

## Props

- `items` - **required** - a list of elements to fill a carousel with;

- `current-item` - **required** the position number of the currently displayed item

 (in case more than one item is visible at a time, `currentNumber` represents

 the position number of the first of visible elements);

- `visible-at-aTime` - **default:** `[1]` - a list of numbers which represent element's fractions displayed

 in carousel in one slide (e.g. `[0.5, 1, 0.5]` means that on each slide there is half

 of the first element, full second element, half of the third element).

- `step` - **default:** `1` - carousel step;

- `speed` - **default:** `1` - the speed of the carousel;

- `swipe-threshold` - **default:** `20` - the threshold in `px` for swipe events to fire;

- `swipe-timeout` - **default:** `500` - the maximum length in `ms` of a single swipe;

- `touch-only-swipes` - **default:** `false` - if `true`, swipe events will only fire on

 touch devices

- `swipeTimingFunction` - **default:** `ease-out` - css timing function for swipe transition

 

 ## Slots

 

 - `item` - a single element in carousel (slot props: `{ item: any }`)

## Events

- `carousel-move` - Payload: `number` - an index offset (negative for moving backwards);