Laravel9 (PHP) 最新 Owl 轮播 2 未在页面上显示图像

Question

您好，我正在尝试使用来自 https://owlcarousel2.github.io/

的 owl 轮播

但 owl 轮播不显示任何内容。我已经检查了 css 和 js。我已经包括了所有来源，但仍然相同。我不知道 js 和 css 是否正常工作。我还在我的页面中重新排列 js 文件。顺便说一句，数据在那里，但是当我放入 owl 旋转木马 class 时，什么也没有显示。

  <div class="owl-carousel featured-carousel owl-theme">
       ............
       ............
  </div>

我在 chrome 浏览器中进行了检查，没有收到错误。我已经包括页面和我的 js 和 css 文件夹。

web page

css and js folder

这是我的代码。

front.blade.php

    <!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>
        @yield('title')
    </title>
    <!-- plugins:css -->
    <link href="{{ asset('frontend/css/custom.css') }}" rel="stylesheet">
    <link href="{{ asset('frontend/css/bootstrap5.css') }}" rel="stylesheet">
    <!-- endinject -->
    <link href="{{ asset('frontend/css/owl.carousel.min.css') }}" rel="stylesheet">
    <link href="{{ asset('frontend/css/owl.theme.default.min.css') }}" rel="stylesheet">

</head>

<body>

    @include('layouts.inc.frontnavbar')

    <div class="content-wrapper">

        @yield('content')

    </div>



    <!-- Scripts -->
    <script src="{{ asset('frontend/js/jquery-3.6.0.min.js') }}"></script>
    <!-- plugins:js -->
    <script src="{{ asset('frontend/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('frontend/js/owl.carousel.min.js') }}"></script>
    <!-- endinject -->
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    @if (session('status'))
        <script>
            swal("{{ session('status') }}");
        </script>
    @endif


    @yield('script')

</body>

</html>

index.blade.php

    @extends('layouts.front')

@section('title')
    Welcome to E-Commerce
@endsection

@section('content')
    @include('layouts.inc.slider')

    <div class="py-5">
        <div class="container">
            <div class="row">
                <div class="owl-carousel featured-carousel owl-theme">
                    @foreach ($featured_products as $prod)
                    <div class="item">
                        <div class="card ">
                            <img src="{{ asset('assets/uploads/products/'.$prod->image) }}" alt="Product image">
                            <div class="card-body">
                                <h5>{{ $prod->name }}</h5>
                                <small>{{ $prod->selling_price }}</small>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
<script>
    $('.featured-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})
</script>
@endsection

Answer 1

您的 yield 和 section 名称不匹配，这意味着您启动 Owl 轮播的调用没有输出到视图。

这是你拥有的：

@yield('script')

@section('scripts')

改为：

@yield('scripts')

@section('scripts')

堆栈

您也可以使用stacks。这些对于将资源附加到视图更有用，因为您可以多次推送，例如来自子视图或组件。

您可以将收益方法更改为

@stack('scripts')

然后你的部分方法：

@push('scripts')
<script>
    $('.featured-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})
</script>
@endpush

Laravel9 (PHP) 最新 Owl 轮播 2 未在页面上显示图像

Laravel9 (PHP) Latest Owl carousel 2 not displaying image on page

javascript

css

php

owl-carousel-2

laravel-9

堆栈