如何修复 owlcarousel 不显示

如何解决如何修复 owlcarousel 不显示

我使用的是 Laravel 框架 6.20.16。

我将 CSS 链接和 js 脚本添加到我的模板文件及其到我的 index.blade.PHP 文件的链接 像往常一样使用@extends('layouts.sewaTemplate')。

<link rel="stylesheet" href="{{ asset('css/owl.carousel.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/owl.theme.default.min.css') }}">
<script src="{{ asset('js/owl.carousel.min.js') }}"></script>

然后我像这样在索引页的底部添加脚本代码

@section('scripts')
<script>
$(document).ready(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
items: 4,loop: true,margin: 10,autoplay: true,autoplayTimeout: 1000,autoplayHoverPause: true
});
$('.play').on('click',function() {
owl.trigger('play.owl.autoplay',[1000])
})
$('.stop').on('click',function() {
owl.trigger('stop.owl.autoplay')
})
})
</script>
@endsection

然后我将此 HTML 代码添加到索引页面

    <div class="row">
        <div class="large-12 columns">
        <div class="owl-carousel owl-theme">
            <div class="item">
            <h4>1</h4>
            </div>
            <div class="item">
            <h4>2</h4>
            </div>
            <div class="item">
            <h4>3</h4>
            </div>
            <div class="item">
            <h4>4</h4>
            </div>
            <div class="item">
            <h4>5</h4>
            </div>
            <div class="item">
            <h4>6</h4>
            </div>
            <div class="item">
            <h4>7</h4>
            </div>
            <div class="item">
            <h4>8</h4>
            </div>
            <div class="item">
            <h4>9</h4>
            </div>
            <div class="item">
            <h4>10</h4>
            </div>
            <div class="item">
            <h4>11</h4>
            </div>
            <div class="item">
            <h4>12</h4>
            </div>
        </div>
        <a class="button secondary play">Play</a> 
        <a class="button secondary stop">Stop</a> 
</section>

**但是只有播放和停止显示**

并且控制台出现错误

app.js:49777 未捕获的错误：模块构建失败（来自 ./node_modules/vue-loader/lib/index.js): TypeError: 无法读取 未定义的属性“parseComponent” 在解析 (home/sameera/Desktop/sewa/sewa/node_modules/@vue/component-compiler-utils/dist/parse.js:15) 在 Object.module.exports (home/sameera/Desktop/sewa/sewa/node_modules/vue-loader/lib/index.js:67) 在 Object../resources/js/components/ExampleComponent.vue (app.js:49777) webpack_require (app.js:20) 在 Object../resources/js/app.js (app.js:49712) webpack_require (app.js:20) 在 Object.0 (app.js:49799) webpack_require (app.js:20) 在 app.js:84 在 app.js:87 ./resources/js/components/ExampleComponent.vue @ app.js:49777 webpack_require @ app.js:20 ./resources/js/app.js @ app.js:49712 webpack_require @ app.js:20 0 @ app.js:49799 [e-mail]:20（匿名）@app.js:84（匿名）@app.js:87