Goldenwere/mackenzii
Goldenwere/mackenzii
1
0
Fork 0
Code Activity Actions

mobile tweaks for carousel

Browse source
This commit is contained in:
lightling 2025-01-29 18:51:44 -05:00
parent 04463b3083
commit 686da07260
Signed by: lightling
GPG key ID: F1F29650D537C773
2 changed files with 11 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
projects/frontend/src/styles/components/carousel.sass
View file

@ -24,6 +24,9 @@
display: flex display: flex
flex-direction: row flex-direction: row
.p-carousel-item
display: flex
.p-carousel-indicator-list .p-carousel-indicator-list
display: flex display: flex
flex-direction: row flex-direction: row

8
projects/frontend/src/views/gallery/gallery-view.vue
View file

@ -51,6 +51,13 @@ const currentSelection = defineModel('currentSelection', { type: Number, default
const currentUrl = computed(() => (resolved.value as GalleryEntryWithVariants).variants[currentSelection.value].url) const currentUrl = computed(() => (resolved.value as GalleryEntryWithVariants).variants[currentSelection.value].url)
const currentAlt = computed(() => (resolved.value as GalleryEntryWithVariants).variants[currentSelection.value].alternativeText) const currentAlt = computed(() => (resolved.value as GalleryEntryWithVariants).variants[currentSelection.value].alternativeText)
const currentCaption = computed(() => (resolved.value as GalleryEntryWithVariants).variants[currentSelection.value].caption) const currentCaption = computed(() => (resolved.value as GalleryEntryWithVariants).variants[currentSelection.value].caption)
const carouselResponsiveOptions = [
{
breakpoint: '800px',
numVisible: 3,
numScroll: 1,
},
]
const onVariantSelected = (event: Event, id: number) => { const onVariantSelected = (event: Event, id: number) => {
currentSelection.value = id currentSelection.value = id
@ -86,6 +93,7 @@ onMounted(async () => {
:value='variants' :value='variants'
:numVisible='5' :numVisible='5'
:numScroll='5' :numScroll='5'
:responsiveOptions='carouselResponsiveOptions'
) )
template( template(
#item='slotProps' #item='slotProps'