I am trying to add an owl carousel in my project in Laravel 8, but it isn't working properly, it is displaying large pictures vertically, in columns, full screen width. I've been stuck for a while now. I think somehow it doesn't read the jquery properly. I had some issues before with blades not reading css from ex: public/frontend/css/custom.css, and when i moved the css into public/css/custom.css it just suddenly worked, so I am also thinking if it is some type of personal issue.
@extends('layouts.front')
@section('title')
Giftbox.com
@endsection
@section('content')
@include('layouts.inc.slider')
<div class="text-center mt-3">
<h2>Featured Products</h2>
<p class="mx-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit veniam adipisci facere officia eligendi placeat, nobis omnis rem laborum cupiditate ducimus fugiat neque nulla sequi architecto deserunt debitis vel.</p>
<div class="container-fluid">
<div class="row">
<div class=".owl-carousel owl-theme">
@foreach ($featured_product as $product)
<div class="item">
<div class="card">
<img src="{{ asset('assets/uploads/products/'.$product->image) }}">
<div class="card-body text-center pb-5">
<h5>{{ $product->name }}</h5>
<span class="float-start mx-4">{{ $product->selling_price }}</span>
<span class="float-end mx-4"><s>{{ $product->original_price }}</s></span>
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
@endsection
@section('scripts')
<script>
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
</script>
@endsection<!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>
<!-- Custom fonts for this template-->
<link href="{{ asset('admin/fontawesome-free/css/all.min.css') }}" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/owl.carousel.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/owl.theme.default.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
<link href="{{ asset('bootstrap/css/bootstrap5.css') }}" rel="stylesheet">
</head>
<body>
@include('layouts.inc.mainnav')
<div id="content">
@yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
<script src="{{ asset('js/owl.carousel.min.js') }}"></script>
<script src="{{ asset('bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<!-- Sweet Alert -->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
@if(session('status'))
<script>
swal("{{ session('status') }}");
</script>
@endif
@yield('scripts')
</body>
</html>
