swiper

<template>
  <div class="carousel-container">
    <swiper :modules="[Autoplay, EffectCoverflow]" :space-between="0" :slides-per-view="'auto'" :centered-slides="true"
      :loop="true" :centeredSlides="true" effect="coverflow" :grabCursor="true" :initialSlide="1" :coverflowEffect="{
        rotate: 0,
        stretch:160,
        depth: 400,
        modifier: 1,
        slideShadows: true,

      }" :autoplay="{ delay: 3000000 }" class="custom-swiper">
      <swiper-slide v-for="(item, index) in slides" :key="index" class="custom-slide">
        <img :src="item.src" :alt="item.alt" />
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import { Autoplay, EffectCoverflow } from 'swiper/modules';
import 'swiper/css/effect-coverflow';

const slides = ref([
  { src: '/src/assets/wallhaven-3lq8q6.jpg', alt: 'Slide 1' },
  { src: '/src/assets/wallhaven-gpyz93.jpg', alt: 'Slide 2' },
  { src: '/src/assets/wallhaven-rr861w.jpg', alt: 'Slide 3' },
  { src: '/src/assets/wallhaven-rrlmem.jpg', alt: 'Slide 4' },
]);
</script>

<style scoped lang="scss">
.carousel-container ::v-deep {
  width: 100%;
  overflow: hidden;
  background-color: #000 !important;

  .custom-swiper {
    width: 100%;
    height: 260px;
  }

  .swiper-slide {
    width: 80%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;

  }

.swiper-slide-shadow-coverflow{
  background-color: #00000033 !important;
}
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }






}
</style>