Ad

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 target="_blank" rel="nofollow noreferrer" 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" target="_blank" rel="nofollow noreferrer" href="owlcarousel/owl.carousel.min.css">
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" 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>


Ad

Answer

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" target="_blank" rel="nofollow noreferrer" 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.

Ad
source: stackoverflow.com
Ad