Search code examples
laravel-5owl-carouselowl-carousel-2

Unable to use owl carousel in laravel 5.6

I'm trying to use owl carousel in laravel 5.6

I've included the following in the header and footer sections of the layout template

layouts/app.blade.php

    <head>
    <link rel="stylesheet" href="{{ asset('js/owlcarousel/dist/assets/owl.carousel.min.css') }}">
    <link rel="stylesheet" href="{{ asset('js/owlcarousel/dist/assets/owl.theme.default.min.css') }}">
    </head>

    <body>
    <script src="{{ asset("js/jquery/dist/jquery.min.js") }}"></script>
    <script src="{{ asset("js/owlcarousel/dist/owl.carousel.min.js") }}"></script>
   </body>

I have added the below in the welcome.blade.php 

<div class="owl-carousel">
      <div> Your Content </div>
      <div> Your Content </div>
      <div> Your Content </div>
      <div> Your Content </div>
      <div> Your Content </div>
      <div> Your Content </div>
      <div> Your Content </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
          $(".owl-carousel").owlCarousel();
        });
    </script>

I do not see any slider. I see an error in the developer tools console that says

Uncaught ReferenceError: $ is not defined

How to solve this?

Solution

  • The issue is with bootstrap 4. However it works fine with bootstrap 4.1. Hence closing this question.

    Hope it helps!