Laravel9（PHP）最新的猫头鹰旋转木马2未在页面上显示图像
嗨，我试图从
频率任何事物。我已经检查了CSS和JS。我包括所有来源，但仍然相同。我不知道JS和CSS工作是否正常。我还会在页面中重新排列JS文件。顺便说一句，数据在那里，但是当我将猫头鹰旋转木马班放入时，什么都没有显示。
<div class="owl-carousel featured-carousel owl-theme">
............
............
</div>
我在Chrome浏览器中进行了检查，但没有出错。我包括页面以及我的JS和CSS文件夹。
网页
CSS和JS文件夹
在这里我的代码。
front.blade.php
<!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>
<!-- plugins:css -->
<link href="{{ asset('frontend/css/custom.css') }}" rel="stylesheet">
<link href="{{ asset('frontend/css/bootstrap5.css') }}" rel="stylesheet">
<!-- endinject -->
<link href="{{ asset('frontend/css/owl.carousel.min.css') }}" rel="stylesheet">
<link href="{{ asset('frontend/css/owl.theme.default.min.css') }}" rel="stylesheet">
</head>
<body>
@include('layouts.inc.frontnavbar')
<div class="content-wrapper">
@yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('frontend/js/jquery-3.6.0.min.js') }}"></script>
<!-- plugins:js -->
<script src="{{ asset('frontend/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('frontend/js/owl.carousel.min.js') }}"></script>
<!-- endinject -->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
@if (session('status'))
<script>
swal("{{ session('status') }}");
</script>
@endif
@yield('script')
</body>
</html>
index.blade.php
@extends('layouts.front')
@section('title')
Welcome to E-Commerce
@endsection
@section('content')
@include('layouts.inc.slider')
<div class="py-5">
<div class="container">
<div class="row">
<div class="owl-carousel featured-carousel owl-theme">
@foreach ($featured_products as $prod)
<div class="item">
<div class="card ">
<img src="{{ asset('assets/uploads/products/'.$prod->image) }}" alt="Product image">
<div class="card-body">
<h5>{{ $prod->name }}</h5>
<small>{{ $prod->selling_price }}</small>
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
@endsection
@section('scripts')
<script>
$('.featured-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
</script>
@endsection
Hi I trying to use owl carousel from https://owlcarousel2.github.io/
but owl carousel not displaying anything. I already check the css and js. I have include all the source but still the same. And I do not know is that js and css working properly or not. I also rearrange js file in my page. By the way, the data is there but when I put inside the owl carousel class nothing show.
<div class="owl-carousel featured-carousel owl-theme">
............
............
</div>
I have inspect in chrome browser and not getting error. I have include the page and my js and css folder.
web page
css and js folder
Here my code.
front.blade.php
<!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>
<!-- plugins:css -->
<link href="{{ asset('frontend/css/custom.css') }}" rel="stylesheet">
<link href="{{ asset('frontend/css/bootstrap5.css') }}" rel="stylesheet">
<!-- endinject -->
<link href="{{ asset('frontend/css/owl.carousel.min.css') }}" rel="stylesheet">
<link href="{{ asset('frontend/css/owl.theme.default.min.css') }}" rel="stylesheet">
</head>
<body>
@include('layouts.inc.frontnavbar')
<div class="content-wrapper">
@yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('frontend/js/jquery-3.6.0.min.js') }}"></script>
<!-- plugins:js -->
<script src="{{ asset('frontend/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('frontend/js/owl.carousel.min.js') }}"></script>
<!-- endinject -->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
@if (session('status'))
<script>
swal("{{ session('status') }}");
</script>
@endif
@yield('script')
</body>
</html>
index.blade.php
@extends('layouts.front')
@section('title')
Welcome to E-Commerce
@endsection
@section('content')
@include('layouts.inc.slider')
<div class="py-5">
<div class="container">
<div class="row">
<div class="owl-carousel featured-carousel owl-theme">
@foreach ($featured_products as $prod)
<div class="item">
<div class="card ">
<img src="{{ asset('assets/uploads/products/'.$prod->image) }}" alt="Product image">
<div class="card-body">
<h5>{{ $prod->name }}</h5>
<small>{{ $prod->selling_price }}</small>
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
@endsection
@section('scripts')
<script>
$('.featured-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
</script>
@endsection
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您的
收益和节名称不匹配，这意味着您启动OWL Carousel的调用不会输出到视图。这就是您所拥有的：
将其更改为：
堆栈
您也可以使用 stacks 。这些对于将资源附加到视图上更有用，因为您可以多次从儿童视图或组件中推动很多次。
您将将您的收益率方法更改
为：
Your
yieldandsectionnames do not match, which means that your call to initiate the Owl Carousel is not being outputted to the view.This is what you have:
Change it to:
Stacks
You can also use stacks. These are more useful for appending resources to the view as you can push many times e.g. from child views or components.
You would change your yield method to
and then your section method to: