https://github.com/Wlada/vue-carousel-3d

Vue Carousel 3D - Beautiful, flexible and touch supported 3D Carousel for Vue.js
https://github.com/Wlada/vue-carousel-3d

Last synced: 14 days ago
JSON representation

Vue Carousel 3D - Beautiful, flexible and touch supported 3D Carousel for Vue.js

• Host: GitHub
• URL: https://github.com/Wlada/vue-carousel-3d
• Owner: Wlada
• License: mit
• Created: 2017-02-10T20:28:26.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-03-03T11:37:25.000Z (about 2 years ago)
• Last Synced: 2025-03-24T11:50:52.466Z (22 days ago)
• Language: HTML
• Homepage:
• Size: 3.31 MB
• Stars: 979
• Watchers: 29
• Forks: 204
• Open Issues: 92
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-github-vue - vue-carousel-3d - VueJS的3D轮播组件 (UI组件)
• awesome-github-vue - vue-carousel-3d - VueJS的3D轮播组件 (UI组件)
• awesome - vue-carousel-3d - VueJS的3D轮播组件 (UI组件)
• awesome-vue - vue-carousel-3d - carousel-3d?style=social) - VueJS的3D轮播组件 (UI组件)

README

        
# Vue Carousel 3d

[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=R64SW4VNC6MGL&source=url)

[![NPM downloads](https://img.shields.io/npm/dm/vue-carousel-3d.svg)](https://npmjs.com/package/vue-carousel-3d)

[![Build Status](https://travis-ci.org/Wlada/vue-carousel-3d.svg?branch=master)](https://travis-ci.org/Wlada/vue-carousel-3d)

[![Coverage Status](https://coveralls.io/repos/github/Wlada/vue-carousel-3d/badge.svg)](https://coveralls.io/github/Wlada/vue-carousel-3d)

[![Codacy Badge](https://api.codacy.com/project/badge/Grade/22c6361755bb4bdd935fd8534babbbb8)](https://app.codacy.com/app/Wlada/vue-carousel-3d?utm_source=github.com&utm_medium=referral&utm_content=Wlada/vue-carousel-3d&utm_campaign=Badge_Grade_Dashboard)

[![Latest Stable Version](https://img.shields.io/npm/v/vue-carousel-3d.svg)](https://www.npmjs.com/package/vue-carousel-3d)

**Feel free to submit issues and feature requests [here](https://github.com/wlada/vue-carousel-3d/issues)**.

**[Full documentation and examples](https://wlada.github.io/vue-carousel-3d)**

## Table of Contents

- [Installation](#installation)

- [Usage](#usage)

- [Development](#development)

- [License](#license)

## Installation

``` bash

npm install -S vue-carousel-3d

```

## Usage

##### Usage (Global)

You may install Vue Carousel 3d globally:

``` js

import Vue from 'vue';

import Carousel3d from 'vue-carousel-3d';

Vue.use(Carousel3d);

```

This will make **<carousel-3d>** and **<slide>** available to all components within your Vue app.

##### Usage (Local)

Include the Carousel 3d into your component using import:

``` js

import { Carousel3d, Slide } from 'vue-carousel-3d';

export default {

  ...

  components: {

    Carousel3d,

    Slide

  }

  ...

};

```

## HTML Structure

Once the **Carousel3d** and **Slide** components are installed globally or imported, they can be used in templates like below:

``` html

  

    

      Slide 1 Content

    

    

      Slide 2 Content

    

  

```

Keep in mind that **index** property on slide component is required property and you will need to pass it for every slide starting from 0

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.

## Changelog

####Version 1.0.0

- All dependencies updated to the latest

- Added one directional carousel and updated the docs (docs updated)

- area-labels added to the buttons

- Y-axys swipe bug fixed.

- Fix SSR

- onMainSlideClick callback now returns the slide index as function parameter (docs updated)

- Added scoped slides (docs updated)