Search code examples
phplaravelsliderowl-carouselowl-carousel-2

How to add OwlCarousel in laravel project?

Can not add OwlCarousel to laravel project properly and it doesn't work. What should I do?

I copied owl.carousel.min.css and owl.theme.default.min.css and owl.carousel.min.js to owlcarousel folder that was placed in the same directory as view.blade.php file was.

My code is:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
    <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
</head>
<body>
<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>
    $(document).ready(function () {
        $(".owl-carousel").owlCarousel();
    });
</script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>
Solution

  • The right way is this one:

    <script type="text/javascript" src="{{ URL::asset('js/owl.min.js') }}"></script>

    The function URL::asset() produces the necessary url for you. Same for the css:

    <link rel="stylesheet" href="{{ URL::asset('css/owl.css') }}" />

    You have to place owlcarousel folder in the laravel's app/public folder, not in views folder. Hope this helps.