unboundedpress/portfolio/components/ImageSlider.vue

<template>
    <Swiper
      :autoHeight="true"
      :loop="true"
      :spaceBetween="30"
      :centeredSlides="true"
      :autoplay="{
        delay: 4000,
        disableOnInteraction: false,
        pauseOnMouseEnter: true
      }"
      :pagination="{
        clickable: true,
      }"
      :navigation="true"
      :style="{
        '--swiper-navigation-color': 'rgb(71 85 105)',
        '--swiper-pagination-color': 'rgb(71 85 105)',
        '--swiper-pagination-bottom': 'auto',
        '--swiper-pagination-top': '1rem',
        '--swiper-navigation-top-offset': '5rem'
      }"
      :modules="[SwiperAutoplay, SwiperPagination, SwiperNavigation]"
      class="h-full flex items-center justify-center"
    >

      <SwiperSlide v-for="image in gallery" class="!flex !items-center !justify-center !h-auto !py-10 !bg-zinc-100">
          <NuxtImg :src="'/' + bucket + '/' + image.image" 
          style="max-width: calc(100% - 80px); max-height: 70vh; object-fit: contain;"/>
      </SwiperSlide>
    </Swiper>
  </template>

<script>
export default {
    props: ['gallery', 'bucket']
}
</script>