Laravel Carousel Owl

Question

I need to use Carousel Owl in my Laravel project.
My JS:

import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';

const carouselEl = document.querySelector('.owl-carousel');
var $ = require('jquery');

$(document).ready(function() {
    carouselEl.owlCarousel();
});

webpack.mix.js:

mix.webpackConfig((webpack) => {
    return {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery'
            }),
        ],
    };
});

When I compiled this, there was error:

carouselEl.owlCarousel is not a function.

can u put your blade.php so can check how u are include `app.js` — Kamlesh Paul, Sep 03 '20 at 09:55
Webpack.mix.js: mix.js('resources/js/app.js', 'public/js') .js('resources/js/script.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); Blade: Everything in this script works, I have issue just with carousel — Blablabla, Sep 03 '20 at 09:58

score 0 · Accepted Answer · answered Sep 03 '20 at 10:42

replace

const carouselEl = document.querySelector('.owl-carousel');

$(document).ready(function() {
    carouselEl.owlCarousel();
});

with

$(document).ready(function() {
    $(".owl-carousel").owlCarousel();
});

your code is not working becouse carouselEl it is just a html element instance so u can call owlCarousel() to that

Laravel Carousel Owl

1 Answers1