Карусель совы не загружается

я хочу добавить карусель Owl на свою веб-страницу, но она не загружается, а в консоли браузера нет сообщений об ошибках. Почему не загружается карусель??

<!DOCTYPE html> 

 <html>
<head>
<link rel= "stylesheet" type="text/css" href="CSS_Header.css"/>

<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="assets/owl.carousel.css"/>

<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
</head>
<body>

<!--  jQuery 1.7+  -->
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>


<!-- Include js plugin -->
<script src="owl.carousel.js"></script>
<script src="owl.carousel.min.js"></script>

<div id="Items" class="owl-carousel">
  <div><img src="slide1.png"/></div>
  <div><img src="slide1.png"/></div>
  <div><img src="slide1.png"/></div>

<script type="text/css">
  $(document).ready(function() { 
    $("#Items").owlCarousel();

});
</script>

</div>

</body>
</html>

jquery owl-carousel jquery-plugins
person Nerd Zilla    schedule 11.09.2014    source источник
comment
почему вы импортируете owl.carousel.js и owl.carousel.min.js? второй должен быть уменьшенной версией первого..   -  person Collett89    schedule 11.09.2014
comment
Даже если я его удалю, он все равно не работает   -  person Nerd Zilla    schedule 11.09.2014
comment
Примите предложения из ответа @Ninsly - если у вас все еще есть проблемы, попробуйте создать скрипку, чтобы мы могли посмотреть на jsfiddle.   -  person Collett89    schedule 11.09.2014

Ответы (3)


arrow_upward
1
arrow_downward

Я считаю, что вы должны добавить класс .item для каждого элемента, который вы добавляете в свою карусель совы, чтобы структура соответствовала распознаванию совы-карусели.

<div id="Items" class="owl-carousel">
  <div class="item"><img src="slide1.png"/></div>
  <div class="item"><img src="slide1.png"/></div>
  <div class="item"><img src="slide1.png"/></div>

<script type="text/css">
  $(document).ready(function() { 
    $("#Items").owlCarousel();

});
</script>

</div>
person Daniela Muniz    schedule 03.03.2017

arrow_upward
0
arrow_downward

У вас есть javascript в теге с пометкой <script type="text/css">. Попробуйте изменить его на <script type="text/javascript">.

Кроме того, я бы посоветовал поместить ваши скрипты в файл <head>. Не рекомендуется размещать ваш скрипт внутри элемента, которым он будет манипулировать.

person Stryner    schedule 11.09.2014
comment
Спасибо, теперь это работает, но я не могу добавить какие-либо функции для карусели, такие как автоматическое воспроизведение, это дает мне неожиданный токен ошибки} - person Nerd Zilla; 11.09.2014
comment
Что ж, я исправил ошибку, но слайды по-прежнему не «запускаются автоматически» ‹script type=text/javascript› $(document).ready(function() { $(#Items).owlCarousel({ autoPlay : 150, }); }); ‹/скрипт› - person Nerd Zilla; 11.09.2014

arrow_upward
0
arrow_downward

Попробуйте использовать более раннюю версию jQuery, например jquery-1.9.1.min.js.

person Snoitan    schedule 03.05.2015