vendredi 22 février 2019

Loading and using Swiper 4.4.6 in Laravel 5.7 / Bootstrap 4.3

I am trying to find the best way to use Swiper in bootstrap 4 based on a Laravel 5.7 website.

In installed Swiper with npm install swiper.

In app.js I have:

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

bootstrap and custom are in resources/js just as app.js. Swiper is installed in /node_modules.

In 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',
    },
})

All above files are loaded and compiled correctly with npm run watch, no errors here.

Still, the swiper is not working while the browser console says ReferenceError: Swiper is not defined

What am I missing here?



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire