Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

vue3-image-carousel-component

volkanfilazi14MIT0.0.3TypeScript support: included

Vue3 Image Carousel Component

A Vue component library for building interactive UI elements.

vue, component, library, carousel, vue3, custom-carousel, image-carousel, image-slider, input-modal

readme

Vue3 Image Carousel Component

A Vue component library for building interactive UI elements.

npm

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/