javascript - 使用 OwlCarousel 加载照片循环时出现问题

Question

我有一个现有且工作的 php 循环，它显示查询中所有照片的缩略图，但照片太多，我想为图像合并幻灯片，所以我开始尝试 OwlCarousel。

我下载到我的文件夹

目前我的站点文件夹结构是这样的

root
|
templates.php

OwlCarousel
    |
    Dist
        |
        owl.carousel.min.js

        Assets
            |
            owl.carousel.min.css
            owl.theme.default.min.css

但我试图在网站上使用它，而我曾经从我的 php 循环中获得大量图像的地方，现在没有了。我不知道我是否错误地包含了这些文件，或者我是否实际上将 JS 用于 OwlCarousel 错误。

我应该从这里做什么？

在我的 templates.php 文件中：

$(".owl-carousel").owlCarousel({
		loop:true,
		nav:true,
		responsive:{
	        0:{
	            items:1
	        },
	        600:{
	            items:3
	        },
	        1000:{
	            items:5
	        }
	    }
	});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">

	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
	<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
	<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>

	<div role="tabpanel" id="images<?php echo $n_id?>" class="tab-pane fade show active">
      <div class="owl-carousel">
		  <?php foreach ($imageResult as $im): ?>
    		<?php if($im['type'] == 'content'){?>
      	<img src="<?php echo $im['url']; ?>" style="max-width:200px; max-height:200px;">
     	<?php } ?>
     	<?php endforeach?>
     </div>
  	</div>

标签： javascriptphphtmlowl-carousel