@mthdht/vue-carousel v1.0.0

Table of Contents

• About the Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Contributing
• License
• Contact
• Acknowledgements

About The Project

Built With

• Vue js

Getting Started

Prerequisites

• npm

npm install npm@latest -g

Installation

1. Install NPM packages

npm install @mthdht/vue-carousel

Usage

First, you have to import the newly installed package

// other import
import { Carousel, Slide } from '@mthdht/vue-carousel'

export default {
    // code

    components: {
        // other components registration
        Carousel,
        Slide
    }
}

Then, you can use the components anywhere in your template:

<template>
    <Carousel>
        <Slide>
            //the content of the slide
        </Slide>
        <Slide>
            //some other content
        </Slide>
    </Carousel>
</template>

Color

By default, this carousel has black color theme but you can change it by passing a color prop.

The colors available are: gray - red - orange - yellow - green - teal - blue - indigo - purple - pink

<Carousel color="blue"></Carousel>

Icons

By default, this carousel has simple arrows for control, but you can change it by passing an icon prop.

The colors available are: arrow - arrow-circle - arrow-alt-circle - chevron - chevron-circle - caret - caret-square which is the arrow icon from Font-awesome

<Carousel icon="caret"></Carousel>

Controls

By default, this carousel shows the arrows to control the carousel, but you can change it by passing an arrows prop to false or true.

Don't forget to bind this prop since the value is actual javascript. see VueJs - passing a boolean as prop

<Carousel :arrows="false"></Carousel>

You also can use the bullets to control your carousel. By default, those bullets doesn't show, but you can change it by passsing a bullets prop to falseor true

<Carousel :bullets="true"></Carousel>

Autoplay and duration

By default, this carousel does not autoplay itself, but you can change it by passing an autoplay prop to trueor false.

Again, don't forget to bind this prop since the value is actual javascript. see VueJs - passing a boolean as prop

<Carousel :autoplay="true"></Carousel>

The default duration for the carousel to change slides is 3.5 secondes. Of course you can change it by passing a duration prop.

The value of duration prop must be in millisecondes, exemple: for 3 secondes, the value should be 3000

<Carousel :duration="1000"></Carousel>

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature)
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License.

Contact

Mthdht - @mthdht - mthdht@gmail.com

Project Link: https://github.com/mthdht/vue-carousel

Acknowledgements

• Font-awesome