This is a Vue 3 component that allows you to set the direction of image movement not only vertically and horizontally but also in different directions (left, right, up, down).
You can install the vue-directional-carousel
package via npm or yarn:
npm install vue-directional-carousel
or
yarn install vue-directional-carousel
- Import the VueDirectionalCarousel component in your Vue.js project:
import DirectionalCarousel from 'vue-directional-carousel'
- Register the VueDirectionalCarousel component locally in your component:
// if use options api
export default {
components: {
DirectionalCarousel
}
}
- Use the vue-directional-carousel component in your template:
<template>
<div>
<directional-carousel
:items="imageList"
:show-prev="true"
:show-next="true"
:interval="2000"
direction="down"
width="100%"
height="200px"
/>
</div>
</template>
<script setup>
import DirectionalCarousel from 'vue-directional-carousel'
// Define your carousel image here
const imageList = [
'src/assets/sample1.png',
'src/assets/sample2.png',
'src/assets/sample3.png',
'src/assets/sample4.png',
'src/assets/sample5.png',
...
]
</script>
props | type | isRequired | default | description |
---|---|---|---|---|
items | string[] | { src: string}[] | Required |
List of images to be used in the carousel. | |
width | string | Optional | '100%' | Width of the carousel. |
height | string | Optional | '300px' | Height of the carousel. |
direction | 'left' | 'right' | 'up' | 'down' | Optional | 'right' | Direction in which the images flow. |
duration | number | Optional | 1000 | Duration of each slide (shorter values make it faster). |
interval | number | Optional | 0 | Auto slide interval for images (in ms). Set to 0 to disable auto sliding. |
pauseAutoplayOnHover | boolean | Optional | false | When auto slide is enabled, pause the slide when the mouse is over an image. Resume auto slide when the mouse is moved outside the carousel area. |
showPrev | boolean | Optional | true | Show previous button. |
showNext | boolean | Optional | true | Show next button. |
showDots | boolean | Optional | true | Show buttons indicating the current image sequence. Click to slide to the corresponding image. |
추후 기능 추가 예정
Use Slot 'item' in your component:
const items = ref([
{
title: "제목1",
url: "google.com",
}, {
title: "제목2",
url: "ahnlab.com",
},
]);
<DirectionalCarousel
:items="items"
direction="down"
height="50px"
width="400px"
:show-next="true"
:show-prev="true"
:interval="2000"
:pause-autoplay-on-hover="true"
>
<template #item="item">
<div :style="{ backgroundColor: 'white', color: 'black', height: '100%', width: '100%' }">
{{ item.title }} / {{ item.url }}
</div>
</template>
</DirectionalCarousel>
MIT