php - 我如何让猫头鹰旋转木马在 Laravel 7 中工作
问题描述
我的 Laravel 项目中有一个无法加载的猫头鹰轮播 Div。我需要您的帮助来找出发生这种情况的原因。
- 我已经尝试为 owl 导入最新的 cdn js 和 css，
- 我已经加载了涉及具有轮播但结果相同的刀片的脚本文件
此图显示了它如何加载到 Laravel 刀片中
这是它如何在 Html 中加载的图像
testimonials.blade.php
<div class="container">
<div class="sec-title clrwhite text-center">
<p>Testimonials</p>
<div class="title">Words From Customers</div>
<div class="border-box center"></div>
</div>
<div class="row">
<div class="col-xl-12">
<div class="testimonial-carousel owl-carousel owl-theme">
<!--Start Single Testimonial Item-->
<div class="single-testimonial-item text-center">
<div class="img-box">
<img src="images/testimonial/1.png" alt="Awesome Image">
</div>
<div class="inner-content">
<div class="text-box">
<p>Your guys were knowledgeable, experienced, efficient and neat. A true to work with Uniafric.</p>
</div>
<div class="client-info">
<h3>Shelly Johnson</h3>
<p><span class="icon-point"></span>California</p>
</div>
</div>
</div>
<!--End Single Testimonial Item-->
<!--Start Single Testimonial Item-->
<div class="single-testimonial-item text-center">
<div class="img-box">
<img src="images/testimonial/2.png" alt="Awesome Image">
</div>
<div class="inner-content">
<div class="text-box">
<p>Your guys were knowledgeable, experienced, efficient and neat. A true to work with Uniafric.</p>
</div>
<div class="client-info">
<h3>Cathrine Wagner</h3>
<p><span class="icon-point"></span>Los Angeles</p>
</div>
</div>
</div>
<!--End Single Testimonial Item-->
<!--Start Single Testimonial Item-->
<div class="single-testimonial-item text-center">
<div class="img-box">
<img src="images/testimonial/1.png" alt="Awesome Image">
</div>
<div class="inner-content">
<div class="text-box">
<p>Your guys were knowledgeable, experienced, efficient and neat. A true to work with Uniafric.</p>
</div>
<div class="client-info">
<h3>Shelly Johnson</h3>
<p><span class="icon-point"></span>California</p>
</div>
</div>
</div>
<!--End Single Testimonial Item-->
<!--Start Single Testimonial Item-->
<div class="single-testimonial-item text-center">
<div class="img-box">
<img src="images/testimonial/2.png" alt="Awesome Image">
</div>
<div class="inner-content">
<div class="text-box">
<p>Your guys were knowledgeable, experienced, efficient and neat. A true to work with Uniafric.</p>
</div>
<div class="client-info">
<h3>Cathrine Wagner</h3>
<p><span class="icon-point"></span>Los Angeles</p>
</div>
</div>
</div>
<!--End Single Testimonial Item-->
<!--Start Single Testimonial Item-->
<div class="single-testimonial-item text-center">
<div class="img-box">
<img src="images/testimonial/1.png" alt="Awesome Image">
</div>
<div class="inner-content">
<div class="text-box">
<p>Your guys were knowledgeable, experienced, efficient and neat. A true to work with Uniafric.</p>
</div>
<div class="client-info">
<h3>Shelly Johnson</h3>
<p><span class="icon-point"></span>California</p>
</div>
</div>
</div>
<!--End Single Testimonial Item-->
<!--Start Single Testimonial Item-->
<div class="single-testimonial-item text-center">
<div class="img-box">
<img src="images/testimonial/2.png" alt="Awesome Image">
</div>
<div class="inner-content">
<div class="text-box">
<p>Your guys were knowledgeable, experienced, efficient and neat. A true to work with Uniafric.</p>
</div>
<div class="client-info">
<h3>Cathrine Wagner</h3>
<p><span class="icon-point"></span>Los Angeles</p>
</div>
</div>
</div>
<!--End Single Testimonial Item-->
</div>
</div>
</div>
<div class="button text-center wow fadeInUp" data-wow-delay="300ms" data-wow-duration="1500ms">
<a class="btn-three" href="#">Read More Words<span class="icon-null"></span></a>
</div>
</div>
@section('scripts')
<script src="{{asset('front/js/custom.js')}}"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!-- <script src="{{asset('front/js/owl.js')}}"></script> -->
<script type="text/javascript" src="{{URL::asset('front/plugins/revolution/js/extensions/revolution.extension.carousel.min.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
@endsection
app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>@yield('title')</title>
<!-- responsive meta -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- For IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="{{asset('frontend/css/open-iconic-bootstrap.min.css')}}">
<!-- master stylesheet -->
<link rel="stylesheet" href="{{asset('front/css/style.css')}}">
<!-- Responsive stylesheet -->
<link rel="stylesheet" href="{{asset('front/css/responsive.css')}}">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="57x57" href="{{asset('front/images/favicon-one/apple-icon-57x57.png')}}">
<!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"> -->
<link rel="apple-touch-icon" sizes="60x60" href="{{asset('front/images/favicon-one/apple-icon-60x60.png')}}">
<link rel="apple-touch-icon" sizes="72x72" href="{{asset('front/images/favicon-one/apple-icon-72x72.png')}}">
<link rel="apple-touch-icon" sizes="76x76" href="{{asset('front/images/favicon-one/apple-icon-76x76.png')}}">
<link rel="apple-touch-icon" sizes="114x114" href="{{asset('front/images/favicon-one/apple-icon-114x114.png')}}">
<link rel="apple-touch-icon" sizes="120x120" href="{{asset('front/images/favicon-one/apple-icon-120x120.png')}}">
<link rel="apple-touch-icon" sizes="144x144" href="{{asset('front/images/favicon-one/apple-icon-144x144.png')}}">
<link rel="apple-touch-icon" sizes="152x152" href="{{asset('front/images/favicon-one/apple-icon-152x152.png')}}">
<link rel="apple-touch-icon" sizes="180x180" href="{{asset('front/images/favicon-one/apple-icon-180x180.png')}}">
<link rel="icon" type="image/png" sizes="192x192" href="{{asset('front/images/favicon-one/android-icon-192x192.png')}}">
<link rel="icon" type="image/png" sizes="32x32" href="{{asset('front/images/favicon-one/favicon-32x32.png')}}">
<link rel="icon" type="image/png" sizes="96x96" href="{{asset('front/images/favicon-one/favicon-96x96.png')}}">
<link rel="icon" type="image/png" sizes="16x16" href="{{asset('front/images/favicon-one/favicon-16x16.png')}}">
<link rel="manifest" href="{{asset('front/images/favicon-one/manifest.json')}}">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="{{asset('front/images/favicon-one/ms-icon-144x144.png')}}">
<meta name="theme-color" content="#ffffff">
@include('includes.header')
@include('includes.nav')
<!-- END nav -->
{{--Start Content--}}
@yield('content')
{{--End Content--}}
@include('includes.footer')
</head>
<!-- GetButton.io widget -->
<script type="text/javascript">
(function () {
var options = {
whatsapp: "+254727529830", // WhatsApp number
call_to_action: "We are online", // Call to action
position: "right", // Position may be 'right' or 'left'
pre_filled_message: "Hello, how may we help you? Just send us a message", // WhatsApp pre-filled message
};
var proto = document.location.protocol, host = "getbutton.io", url = proto + "//static." + host;
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();
</script>
<!-- /GetButton.io widget -->
<script src="{{asset('front/js/jquery.js')}}"></script>
<script src="{{asset('front/js/wow.js')}}"></script>
<script src="{{asset('js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('front/js/jquery.fancybox.js')}}"></script>
<script src="{{asset('front/js/jquery.countTo.js')}}"></script>
<script src="{{asset('front/js/appear.js')}}"></script>
<script src="{{asset('front/js/validation.js')}}"></script>
<script src="{{asset('front/js/jquery.mixitup.min.js')}}"></script>
<script src="{{asset('front/js/isotope.js')}}"></script>
<script src="{{asset('front/js/jquery.paroller.min.js')}}"></script>
<script src="{{asset('front/js/jquery.easing.min.js')}}"></script>
<script src="{{asset('front/js/jquery.enllax.min.js')}}"></script>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyB2uu6KHbLc_y7fyAVA4dpqSVM4w9ZnnUw"></script>
<script src="{{asset('front/js/gmaps.js')}}"></script>
<script src="{{asset('front/js/map-helper.js')}}"></script>
<script src="{{asset('front/assets/language-switcher/jquery.polyglot.language.switcher.js')}}"></script>
<script src="{{asset('front/assets/timepicker/timePicker.js')}}"></script>
<script src="{{asset('front/js/bootstrap-select.min.js')}}"></script>
<script src="{{asset('front/assets/html5lightbox/html5lightbox.js')}}"></script>
<!--Revolution Slider-->
<script src="{{asset('front/plugins/revolution/js/jquery.themepunch.revolution.min.js')}}"></script>
<script src="{{asset('front/plugins/revolution/js/jquery.themepunch.tools.min.js')}}"></script>
<script src="{{asset('front/plugins/revolution/js/extensions/revolution.extension.actions.min.js')}}"></script>
<script src="{{asset('front/plugins/revolution/js/extensions/revolution.extension.kenburn.min.js')}}"></script>
<script src="{{asset('front/plugins/revolution/js/extensions/revolution.extension.layeranimation.min.js')}}"></script>
<script src="{{asset('front/plugins/revolution/js/extensions/revolution.extension.migration.min.js')}}"></script>
<script src="{{asset('front/plugins/revolution/js/extensions/revolution.extension.navigation.min.js')}}"></script>
<script src="{{asset('front/plugins/revolution/js/extensions/revolution.extension.parallax.min.js')}}"></script>
<script src="{{asset('front/plugins/revolution/js/extensions/revolution.extension.slideanims.min.js')}}"></script>
<script src="{{asset('front/plugins/revolution/js/extensions/revolution.extension.video.min.js')}}"></script>
<script src="{{asset('front/js/main-slider-script.js')}}"></script>
<!-- thm custom script -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
@yield('scripts')