mwinter/portfolio
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Adjust carousel navigation arrows and spacing

Browse source
This commit is contained in:
Michael Winter 2026-02-19 02:46:16 +01:00
parent 4bf23f0d25
commit 9d7ecd3dd1
1 changed files with 5 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
components/ImageSlider.vue
View file

@ -16,17 +16,16 @@
:style="{ :style="{
'--swiper-navigation-color': 'rgb(71 85 105)', '--swiper-navigation-color': 'rgb(71 85 105)',
'--swiper-pagination-color': 'rgb(71 85 105)', '--swiper-pagination-color': 'rgb(71 85 105)',
'--swiper-pagination-bottom': 'auto', '--swiper-pagination-top': '0',
'--swiper-pagination-top': '1rem', '--swiper-navigation-top-offset': '4rem'
'--swiper-navigation-top-offset': '5rem'
}" }"
:modules="[SwiperAutoplay, SwiperPagination, SwiperNavigation]" :modules="[SwiperAutoplay, SwiperPagination, SwiperNavigation]"
class="h-full w-full" class="h-full w-full px-12 pt-16"
> >
<SwiperSlide v-for="(image, index) in gallery" :key="image.id || index" class="!flex !items-center !justify-center !py-4 !bg-zinc-100"> <SwiperSlide v-for="(image, index) in gallery" :key="image.id || index" class="!flex !items-start !justify-center !py-8 !bg-zinc-100">
<img :src="'/' + bucket + '/' + image.image" <img :src="'/' + bucket + '/' + image.image"
style="max-width: 100%; max-height: calc(85vh - 40px); object-fit: contain;"/> style="max-width: calc(100% - 80px); max-height: calc(85vh - 160px); object-fit: contain;"/>
</SwiperSlide> </SwiperSlide>
</Swiper> </Swiper>
</template> </template>