npm install @splidejs/vue-splide

import { defineNuxtPlugin } from '#app';
import '@splidejs/splide/dist/css/splide.min.css';
import { Splide, SplideSlide } from '@splidejs/vue-splide';

export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('Splide', Splide);
nuxtApp.vueApp.component('SplideSlide', SplideSlide);
});

plugins: ['~/plugins/splide.client.js']

<client-only>
  <div>
    <Splide :options="{
          autoplay: true,
          interval: 3000,       // Intervalo en milisegundos (3 segundos)
          pauseOnHover: false,  // Opcional: No pausar al pasar el mouse
          pauseOnFocus: false,  // Opcional: No pausar al enfocarse
          type: 'loop', // para 'fade' agregar rewind: true
          perPage: 1, 
          gap: '1rem', 
          //height: 'auto', 
          // autoWidth: true,
          start: 0, 
          // rewind: true
      }">
      <SplideSlide>
        <img :src="img_01" alt="Sample 1">
      </SplideSlide>
      <SplideSlide>
        <img :src="img_02" alt="Sample 1">
      </SplideSlide>
      <SplideSlide>
        <img :src="img_03" alt="Sample 1">
      </SplideSlide>          
    </Splide>
  </div>
</client-only>

.splide {
  width: 100%; /* Asegura que no se salga del contenedor */
  max-width: 1200px; /* Ajusta según tu diseño */
  margin: 0 auto; /* Centrar en la pantalla */
}
.splide__slide img {
  display: block;
  width: 100%; /* Ajustar al ancho del slide */
  height: auto; /* Mantener proporción */
  object-fit: cover; /* Opcional para recortar imágenes */
}