Question

Buenos días,

Estoy intentando implementar la librería Swiper en Laravel 8 y estoy teniendo problemas al implementarlo. Dentro de la carpeta resources/js me he creado un archivo llamado swiper.js con lo siguiente:

import Swiper, { Navigation, Pagination } from 'swiper';

// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);

En el archivo app.js he añadido:

require('./swiper');

Por último en mi plantilla blade donde quiero llamar a Swiper:

<script>
    // init Swiper:
    var mySwiper = new Swiper('.swiper-container', {
        // Optional parameters
        direction: 'vertical',
        loop: true,
    });
</script>

Estoy obteniendo en consola: Swiper is not defined. ¿Qué me está faltando?

Muchas gracias de ante mano.

Answer 1

La forma en la que estás importando "swiper" solo funciona con NodeJS. Averiguá sobre Laravel Mix que te permite compilar usando Webpack. De esa manera, no tendrías ese problema, con agregar un paso de compilación ya no tendrías ese problema. En youtube hay varios videos sobre ese tema.