atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-09 00:19:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Create <RollingGallery /> component

Browse Source
This commit is contained in:
Alfarish Fizikri
2025-07-23 07:33:44 +07:00
parent 53c5b5e208
commit b4ff605c88
5 changed files with 515 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/constants/Categories.ts
View File

@@ -80,7 +80,8 @@ export const CATEGORIES = [
'Flowing Menu',
'Elastic Slider',
'Stack',
'Chroma Grid'
'Chroma Grid',
'Rolling Gallery'
]
},
{

1
src/constants/Components.ts
View File

@@ -69,6 +69,7 @@ const components = {
'tilted-card': () => import('../demo/Components/TiltedCardDemo.vue'),
'stack': () => import('../demo/Components/StackDemo.vue'),
'chroma-grid': () => import('../demo/Components/ChromaGridDemo.vue'),
'rolling-gallery': () => import('../demo/Components/RollingGalleryDemo.vue'),
};
const backgrounds = {

26
src/constants/code/Components/rollingGalleryCode.ts Normal file
View File

@@ -0,0 +1,26 @@
import code from '@content/Components/RollingGallery/RollingGallery.vue?raw';
import { createCodeObject } from '@/types/code.ts';
export const rollingGallery = createCodeObject(code, 'Components/RollingGallery', {
installation: `npm install motion-v`,
usage: `<template>
<RollingGallery
:autoplay="true"
:pause-on-hover="true"
:images="customImages"
/>
</template>
<script setup lang="ts">
import RollingGallery from "./RollingGallery.vue";
const customImages = [
"https://images.unsplash.com/photo-1528181304800-259b08848526?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1506665531195-3566af2b4dfa?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?q=80&w=3456&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1495103033382-fe343886b671?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"https://images.unsplash.com/photo-1506781961370-37a89d6b3095?q=80&w=3264&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
// Add more images as needed
];
</script>`
});