Vue carousel

Simple vue component that outputs an infinite carousel

built with Vue.js and Bulma

Preview

Simple

With auto sliding and progressbar

Props

images (required): Accepts array of objects.
starting-image (optional) [DEFAULT: 0]: Accepts the index of the image that the carousel starts from
auto-slide-interval (optional): time in milliseconds to auto slide to the next image e.g. 1000, which is 1 second
show-progress-bar (optional) [DEFAULT: false]: boolean to show or hide the progressbar on top of the images. Needs to be used with auto-slide-interval prop.

    //Example of images
    let images = [
        { 
            id: '1',
            big: 'path to full image',
            thumb: 'path to thumbnail'
        },
        { 
            id: '2',
            big: 'path to full image',
            thumb: 'path to thumbnail'
        }
    ]

Example usage

Method 1

You can see an example in both index.html and component.html

Steps

include vue.js
include the carousel.js
create the images array
reference the carousel in your html

Method 2

Using the component with vue cli as a single file component

This method does not use Bulma

Note

To reference the Carousel with another name

change the name of the file (Carousel.vue) to whatever you want e.g. MyCarousel.vue
change the name attribute inside the file to the previously given name e.g. MyCarousel

Steps

Download Carousel.vue
Copy the file to your project
create the images array

 // import the Carousel.vue 
 import Carousel from 'path/to/Carousel.vue'
 <script>
     export default {
         name: 'OtherComponent',
         // Include the Carousel here
         components: {
             Carousel
         }
         ...
     }
 </script>

reference it in your template as shown in the examples below

<!-- Example -->
<carousel
    :starting-image="2"
    :images="images"
></carousel>

<!-- Example with auto slide-->
<carousel
    :starting-image="2"
    :images="images"
    :auto-slide-interval="1500"
></carousel>

<!-- Example with auto slide and progressbar on top of the images-->
<carousel
    :starting-image="2"
    :images="images"
    :auto-slide-interval="1500"
    :show-progress-bar="true"
></carousel>

You can also find a post I've written explaining the process on dev.to

📝 Features

If you want a new feature to be implemented you can create an issue with the label Feature.

Contributing

Pull requests are more than welcome! 😃

License

tsanak/vue-carousel

ErrorLooks like something went wrong!

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages