Question

我需要在Laravel项目中使用Carousel Owl。
我的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'
            }),
        ],
    };
});

当我对此进行编译时，出现了错误：

carouselEl.owlCarousel is not a function.

Answer 1

替换

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.postgres',
'django.contrib.staticfiles',
'django.contrib.sites',
'django.contrib.sitemaps',
'django.contrib.flatpages',

# wagtail apps
'wagtail.contrib.forms',
'wagtail.contrib.redirects',
'wagtail.embeds',
'wagtail.sites',
'wagtail.users',
'wagtail.snippets',
'wagtail.documents',
'wagtail.images',
'wagtail.search',
'wagtail.admin',
'wagtail.core',
'wagtail_modeltranslation',
'wagtail_modeltranslation.makemigrations',
'wagtail_modeltranslation.migrate',

'allauth',
'allauth.account',
'allauth.socialaccount',
'allauth.socialaccount.providers.facebook',

'newsletter',
'stentor',
'consent',

'banners',
'banners.dashboard',
'contact_form',
'faq',
'faq.dashboard',
'pages',
'blog',

'oscar',
'oscar.apps.analytics',
'oscar.apps.address',
'oscar.apps.partner',
'oscar.apps.payment',
'oscar.apps.search',
'oscar.apps.voucher',
'oscar.apps.wishlists',
'oscar.apps.dashboard.reports',
'oscar.apps.dashboard.users',
'oscar.apps.dashboard.orders',
'oscar.apps.dashboard.partners',
'oscar.apps.dashboard.pages',
'oscar.apps.dashboard.ranges',
'oscar.apps.dashboard.reviews',
'oscar.apps.dashboard.vouchers',
'oscar.apps.dashboard.communications',
'oscar.apps.dashboard.shipping',

'basket',
'catalogue.reviews',
'catalogue',
'customer',
'checkout',
'order',
'dashboard',
'dashboard.catalogue',
'dual_search',
'shipping',
'euro_bank',
'euro_bank.dashboard',
'paypal',
'paypal.express.dashboard.apps.ExpressDashboardApplication',
'scientific_council',
'scientific_council.dashboard',
'offer',
'dashboard.offers',

'treebeard',
'rest_framework',
'django_extensions',
'django_tables2',
'sorl.thumbnail',
'groundworks',
'widget_tweaks',
'oscar_extensions',
'dynamic_ordering',
'el_pagination',

'core',  # This needs to be below oscar_extensions so we override the templatetag extra_actions
'stores',
'stores.dashboard',

'django.forms',

'modelcluster',
'taggit',
'modeltranslation']

使用

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

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

您的代码不起作用，因为$(document).ready(function() { $(".owl-carousel").owlCarousel(); });只是一个html元素实例，因此您可以为此调用carouselEl

Laravel轮播猫头鹰

1 个答案: