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

Hi I trying to use owl carousel from https://owlcarousel2.github.io/

but owl carousel not displaying anything. I already check the css and js. I have include all the source but still the same. And I do not know is that js and css working properly or not. I also rearrange js file in my page. By the way, the data is there but when I put inside the owl carousel class nothing show.

  <div >
       ............
       ............
  </div>

I have inspect in chrome browser and not getting error. I have include the page and my js and css folder.

web page

css and js folder

Here my code.

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 >

        @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 >
        <div >
            <div >
                <div >
                    @foreach ($featured_products as $prod)
                    <div >
                        <div >
                            <img src="{{ asset('assets/uploads/products/'.$prod->image) }}" alt="Product image">
                            <div >
                                <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

CodePudding user response：

Your yield and section names do not match, which means that your call to initiate the Owl Carousel is not being outputted to the view.

This is what you have:

@yield('script')

@section('scripts')

Change it to:

@yield('scripts')

@section('scripts')

Stacks

You can also use stacks. These are more useful for appending resources to the view as you can push many times e.g. from child views or components.

You would change your yield method to

@stack('scripts')

and then your section method to:

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