vue3-simple-carousel-lite

A simple and responsive carousel component focused on being the lightest weight.

Usage no npm install needed!

<script type="module">
  import vue3SimpleCarouselLite from 'https://cdn.skypack.dev/vue3-simple-carousel-lite';
</script>

README

Vue3 Carousel Lite

Getting started

1.- Install

npm i vue3-simple-carousel-lite

2.- Import component

<script>
import vue-carousel from "vue3-simple-carousel-lite"
export default {
    components: vue-carousel
}
</script>

3.- Use it on your project

<template>
    <vue-carousel/>
</template>

How to use

<template>
    <vue-carousel 
        :slides="mySlides"
        :breakpoints="[720, 1280, 1600]
        :autoplay="4000"
    />
</template>
<script>
export default {
    data: () => ({
        mySlides: [
            { img: [image1SM, image1MD, image1LG, image1XL], goTo: url},
            { img: [image2SM, image2MD, image2LG, image2XL], goTo: url},
            { img: [image3SM, image3MD, image3LG, image3XL], goTo: url},			
        ]
    })
}
</script>

Props

  • Slides: REQUIRED. It accepts an array of objects with "imgs" and "goTo". imgs, The image or Images that we are going to use, order from smallest to largest size for responsive design. You could use urls or require('./assets/example.jpg') for local imgs. *We need a breakpoint for each extra img goTo, The url to which it will send us when clicking. This is optional.

  • Breakpoints: It accepts an array of numbers.

  • It works as media-query with min-width, there is no need to specify anything for the first image, only for the others.

  • Autoplay: It accepts a number for the autoplay interval in ms. The default value is 3000, you can set 0 or false to disable.

Customize Styles

Add an ID tag to your component so your properties takes priority.

<template>
    <vue-carousel id="example"/>
</template>

Classes

  • .btn: for the controls buttons.
  • .slide-count: for the list of counts below.
  • .count: for all the counts.
  • .current: for the count corresponding to the current slide.
  • .arrow: for the arrows in the control buttons. There are also .prev, .next, .slide-count, .right and .left