Сова Карусель 2 устанавливает себя, чтобы показать ни один

я пытаюсь заставить сову карусель 2 работать на моем php сайте. Я использовал точно такой же код на сайте Anguler, кроме функции, конечно. Так что это должно работать. Вот мой скрипт и ссылки

jQuery(document).ready(function(){
jQuery('#owl2').owlCarousel({
navigation: true,
nav: true,
dots: false,
margin: 50,
dotsEach: false,
dotData: false,
center: true,
autoWidth: true,
items: 5,
center:true,
slideSpeed: 300,
paginationSpeed: 400,
autoPlay: false,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
});
});

HTML

 <div class="container">
<div class="row">
<div class="col-md-12">
<div id="owl2" class="owl-carousel owl-theme">
<div class="item verticle-align">
<img class="verticle-align" src="img/metabo.png" alt="">
</div>
<div class="item">
<img class="verticle-align" src="img/aeroquip.png" alt="">
</div>
<div class="item">
<img class="verticle-align" src="img/IR.png" alt="">
</div>
<div class="item">
<img class="verticle-align" src="img/huck.png" alt="">
</div>
<div class="item">
<img class="verticle-align" src="img/infasco.png" alt="">
</div>
<div class="item">
<img class="verticle-align" src="img/metabo.png" alt="">
</div>
<div class="item">
<img class="verticle-align" src="img/chicago-pneumatic.jpg" alt="">
</div>
<div class="item">
<img class="verticle-align" src="img/Gesipa.jpg" alt="">
</div>
</div>
</div>
</div>
</div>

и мои ссылки

 <!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/boot/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/boot/bootstrap-theme.css"><!--owl css-->
<link rel="stylesheet" type="text/css" href="css/owl_carousel/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="css/owl_carousel/owl.theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" >

<!--Other CSS files-->
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/fa/font-awesome.css">

<!--Jquery-->
<script src="js/jquery-2.2.3.min.js"></script><!-- Bootstrap JS -->
<script src="js/boot/bootstrap.js"></script>
<!--<script src="js/boot/bootstrap.min.js"></script>-->

<!--Other Js files-->
<script src="js/main.js"></script>
<script src="js/owl/owl.carousel.js"></script>

Я делал это много раз раньше, но, кажется, не могу заставить его работать на этот раз. У кого-нибудь есть идеи, что я делаю не так?

Меня попросили добавить вторую карусель, которую я использую на странице, ниже html / js для указанной карусели

<div id="owl" class="owl-carousel owl-theme">
<div class="item first-item">
<div class="products-images">
<a href="./img/catalog/9-Assortments-Storage.pdf"     target="_blank">Assortments</a>
</div>
</div>
<div class="item">
<div class="products-images">
<a href="./img/catalog/4-Tools.pdf"               target="_blank">Tools</a>
</div>
</div>
<div class="item">
<div class="products-images">
<a href="./img/catalog/4-Tools.pdf" target="_blank">Cutting Tools</a>
</div>
</div>
<div class="item active">
<div class="products-images ">
<a href="./img/catalog/7-Brass.pdf" target="_blank">Fittings</a>
</div>
</div>
<div class="item">
<div class="products-images">
<a href="./img/catalog/6-Electrical.pdf" target="_blank">Electrical</a>
</div>
</div>
<div class="item">
<div class="products-images">
<a href="./img/catalog/1-Fasteners.pdf" target="_blank">Fasteners</a>
</div>
</div>
<div class="item">
<div class="products-images">
<a href="./img/catalog/2014Safety.pdf" target="_blank">Saftey</a>
</div>
</div>
<div class="item">
<div class="products-images">
<a href="./img/catalog/5-ShopSupplies.pdf" target="_blank">Shop Supplies</a>
</div>
</div>
<div class="item">
<div class="products-images">
<a href="./img/catalog/2-Rivets-Huck.pdf" target="_blank">Rivets</a>
</div>
</div>
<div class="item">
<div class="products-images">
<a href="./img/catalog/2014CustomPackaging.pdf" target="_blank">Custom Packaging</a>
</div>
</div>
<div class="item">
<div class="products-images">
<a href="./img/catalog/3-Chemicals.pdf" target="_blank">Chemicals</a>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#owl').owlCarousel({
navigation: true,
nav: true,
dots: false,
dotsEach: false,
dotData: false,
center: true,
autoWidth: true,
items: 7,
center:true,
slideSpeed: 300,
paginationSpeed: 400,
autoPlay: false,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
});
});
</script>

4

Решение

РЕШИТЬ

Таким образом, проблема заключалась в моем файле owl.carousel.min.js И моих файлах css. Я загрузил самую новую версию при запуске. Однако при использовании этой ссылки

    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css">

Это начало работать. не уверен, что скачанный файл каким-то образом был поврежден, но неважно. Теперь это работает. Надеюсь, это поможет кому-то в будущем!

Особая благодарность @Marcus, который вчера поговорил со мной некоторое время, пытаясь помочь мне решить эту проблему. Спасибо куча бутон!

1

Другие решения

+ Изменить id="owl2" в id="owl"

Или поменять ('#owl') в ('#owl2'), Как вам нравится.

0

По вопросам рекламы [email protected]