Vue3 Image Carousel Component

A Vue component library for building interactive UI elements.

License

This project is licensed under the MIT License.

Installation

npm i vue3-image-carousel-component

or

yarn add vue3-image-carousel-component

Usage

import {VCarousel} from 'vue3-image-carousel-component' <br>
import 'vue3-image-carousel-component/dist/style.css';

Props

The following table describes the props that can be passed to the component for customization:

Prop	Type	Description
images	String	Your Image array will be inside of images.
backButtonWidth	String	The Width of back button.
nextButtonWidth	String	The Width of back button.
backButtonHeight	String	The Height of back button.
nextButtonHeight	String	The Height of next button.
arrowsColor	String	The color of the button.
slideWidth	String	The width of slide.
slideHeight	String	The height of slide.
mainDivDisplay	String	Choose your display type default flex.
mainDivAlignItems	String	Align items type default center.
imageWidth	String	The width of image default 100%.
imageHeight	String	The width of image default 100%.
objectFitCover	String	Choose your fit default Cover

Example

<template>
const carouselImages = [
  "https://exampleImageOne",
  "https://exampleImageTwo",
  "https://exampleImageThree"
]
  <Carousel 
    :images=  "carouselImages"
    slideWidth="1000px"
    slideHeight="500px"
    backButtonWidth="100px"
    backButtonHeight="100px"
    nextButtonWidth="100px"
    nextButtonHeight="100px"
    arrowsColor="red" 
    mainDivDisplay="flex" 
    mainDivAlignItems="center" 
    imageWidth="100%" 
    imageHeight="100%" 
    objectFitCover="Cover"
    >
  </Carousel>
</template>

<script>
import { VCarousel } from 'vue3-image-carousel-component';
## Props

License

This project is licensed under the MIT License.

---

_{Built with ❤️ by Volkan Filazi
https://github.com/volkanfilazi
https://www.volkanfilazi.at/}