Search code examples
javascriptphpcsslaravel-9owl-carousel-2

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

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 class="owl-carousel featured-carousel owl-theme">
  ............
  ............
</div>

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

web page

web page

css and js folder

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 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
Solution

  • 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