Загрузка и использование Swiper 4.4.6 в Laravel 5.7 / Bootstrap 4.3

Question

Я пытаюсь найти лучший способ использовать Swiper в начальной загрузке 4 на основе веб-сайта Laravel 5.7.

В установленном Swiper с npm install swiper.

В приложении.js У меня есть:

require('./bootstrap');
require('swiper');
require('./custom');

Самозагрузка и обычай находятся в ресурсах / js так же, как app.js.Swiper установлен в /node_modules.

В custom.js

var ProjectSwiper = new Swiper('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,

    // If we need pagination
    pagination: {
        el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
    scrollbar: {
        el: '.swiper-scrollbar',
    },
})

Все вышеуказанные файлы загружаются и компилируются правильно с npm run watch, здесь ошибок нет.

Тем не менее, swiper не работает, в то время как консоль браузера говорит ReferenceError: Swiper is not defined

Что мне здесь не хватает?

Answer 1

window.Swiper = require('swiper').default;

Этот код будет работать.

Answer 2

Попробуйте загрузить Swiper следующим образом:

var Swiper = require('swiper'); 

или как модуль ES:

import Swiper from 'swiper';

Вы также можете решить загрузить его в boostrap.js, где другие библиотекизагружаются также:

window.Swiper = require('swiper');