A Vue component library for building interactive UI elements.
This project is licensed under the MIT License.
npm i vue3-image-carousel-component
or
yarn add vue3-image-carousel-component
import {VCarousel} from 'vue3-image-carousel-component' <br>
import 'vue3-image-carousel-component/dist/style.css';
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 |
<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
This project is licensed under the MIT License.