在单个页面上使用两个（猫头鹰）轮播不起作用
Posted
技术标签:
【中文标题】在单个页面上使用两个（猫头鹰）轮播不起作用【英文标题】：Using two (owl) carousel on a single page is not working 【发布时间】：2021-11-23 01:09:35 【问题描述】：我正在尝试在我的页面上使用两个猫头鹰轮播，但我不能。
Gif：https://gyazo.com/51620bc2fa6183bdcaab511632e1eb57
第一个运行良好（gif 顶部的那个）
但第二个（gif 下方的那个）不起作用。它设置为显示 4 张图像，而不是我设置的 2 张。我不知道该怎么办
这个很好用：
<body>
<!-- MENU-->
<section>
<div class="owl-carousel owl-theme">
<div class="item">
<img src="img/image1.jpg">
</div>
<div class="item">
<img src="img/image2.jpg">
</div>
<div class="item">
<img src="img/image3.jpg">
</div>
<div class="item">
<img src="img/image4.jpg">
</div>
<div class="item">
<img src="img/image5.jpg">
</div>
<div class="item">
<img src="img/image6.jpg">
</div>
<div class="item">
<img src="img/image7.jpg">
</div>
<div class="item">
<img src="img/image8.jpg">
</div>
<div class="item">
<img src="img/image9.jpg">
</div>
</div>
<!--script MENU-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(document).ready(function()
$(".owl-carousel").owlCarousel(
loop:true,
responsive:
0 :
items : 1
,
600 :
items : 2
,
1200 :
items : 4
,
autoplay: true,
autoplayTimeout: 1500
);
)
</script>
</section>
但是这个不太好用：
<header>
<div class="owl-carousel owl-theme">
<div class="item"><img src="/img/Group 1.jpg" /></div>
<div class="item"><img src="/img/Group 2.jpg" /></div>
</div>
<script>
$('.owl-carousel').owlCarousel(
loop:true,
margin:0,
nav:true,
dots:true,
responsive:
0:
items:1
,
600:
items:1
,
1000:
items:1
)
</script>
<!--Script HEADER-->
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
</header>
Href 菜单：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
Href 标头：
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
CSS（标题）：
* margin:0; padding:0; box-sizing:border-box
body
background-color: #fff;
.item img height:450px; width:100%; object-fit:cover
.owl-nav
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 9999;
width: 100%;
.owl-nav button
background: #fff !important;
width: 50px;
height: 50px;
display: block
.owl-nav button.owl-next
float: right;
.owl-nav button.owl-prev
float: left;
.owl-dots
position: absolute;
bottom: 5%;
left: 0;
right: 0;
【问题讨论】：
【参考方案1】：用于运行轮播的两个脚本都在寻找具有“.owl-carousel”类的块并找到它们。所以，我们有冲突。两个轮播都由每个脚本 sn-ps 初始化，但具有不同的选项。 你必须更好 - 为每个轮播添加不同的 ID 并分别（单独）初始化它们：
<div id="carousel-1" class="owl-carousel owl-theme">
...
</div>
<div id="carousel-2" class="owl-carousel owl-theme">
...
</div>
<script>
$("#carousel-1").owlCarousel(
items: 4,
...
);
</script>
<script>
$("#carousel-2").owlCarousel(
items: 2,
...
);
</script>
【讨论】：
您好，谢谢您，但仍然无法正常工作:( 我编辑了我的帖子（有点混乱）我认为现在更好 编辑：它的工作！我们忘记了 ''$("#carousel-1").owlCarousel('' 中的 ''owl-'' 非常感谢 Aleksandr !!以上是关于在单个页面上使用两个（猫头鹰）轮播不起作用的主要内容，如果未能解决你的问题，请参考以下文章
在 python Django 中的 ajax 成功后，猫头鹰轮播不工作