Проблемы при загрузке фото петли с OwlCarousel - PullRequest
Новая
       9

Проблемы при загрузке фото петли с OwlCarousel

0 голосов
/ 13 января 2019

У меня есть работающий цикл 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>
...