Unable to use owl carousel in laravel 5.6

Question

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?

score 0 · Accepted Answer · answered Aug 26 '18 at 22:24

0

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

Hope it helps!

answered Aug 26 '18 at 22:24

score 0 · Answer 2 · edited Oct 16 '19 at 12:37

0

You should link JQuery first like this:

<script src="jquery.js" type="text/javascript"></script>

edited Oct 16 '19 at 12:37

Wai Ha Lee

8,598
83
57
92

answered Oct 16 '19 at 10:39

Андрей Яковлев

11

1

We can't wait for the rest of this answer ;-) – Pochmurnik Oct 16 '19 at 10:57
@Tom the answer was there all along - just some formatting needed. – Wai Ha Lee Oct 16 '19 at 12:37

Unable to use owl carousel in laravel 5.6

2 Answers2