0

Estoy implementando en un componente de Nextjs14 a splidejs para un banner con dos imágenes. Según la documentación (que a continuación la daré) entendí como hacerlo pero no funciona: https://splidejs.com/guides/options/#lazyload

import { Splide, SplideSlide } from '@splidejs/react-splide';
import '@splidejs/react-splide/css';
import styles from '../../../../styles/homeBannerSection.module.scss'
import HomeMobileBanner1 from '../../../../public/img/banner1mobile.png'
import HomeMobileBanner2 from '../../../../public/img/banner2mobile.jpg'
import HomeDesktopBanner1 from '../../../../public/img/banner1Desktop.png'
import HomeDesktopBanner2 from '../../../../public/img/banner2Desktop.jpg'
import Image from 'next/image';

export default function HomeBannerSection(){
    return(
        <Splide
            options={{
                height: '290px',
                lazyLoad: 'sequential',
                breakpoints: {
                    767:{
                        height: '250px'
                    },
                    991:{
                        height: '450px'
                    },
                    1199:{
                        height: '210px'
                    }
                }
            }}
        >
            <SplideSlide className={styles.splideSlide}>
                <Image
                    data-splide-lazy-srcset={`${HomeMobileBanner1} 991w, ${HomeDesktopBanner1} 1199w`}
                    data-splide-lazy={HomeDesktopBanner1}
                    src={HomeDesktopBanner1}
                    alt='Banner Inicio 1'
                    fill
                />
            </SplideSlide>
            <SplideSlide className={styles.splideSlide}>
                <Image
                    data-splide-lazy-srcset={`${HomeMobileBanner2} 991w, ${HomeDesktopBanner2} 1199w`}
                    data-splide-lazy={HomeDesktopBanner2}
                    src={HomeDesktopBanner2}
                    alt='Banner Inicio 2'
                    fill
                />
            </SplideSlide>
        </Splide>
    )
}

Lo que ocurre al renderizar el sitio es que las imágenes quedan cargando y solo se muestra el alt. ¿Cómo puedo solucionarlo?

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.