在项目中使用Owl旋转木马
我正在尝试使用一个猫头鹰旋转木马在我的项目，但不知何故没有显示，我不知道是什么问题与它。谁能帮助我理解我做错了什么？我已经按照本教程https://github.com/owlcarousel2/owlcarousel2中的步骤进行了操作，并且我还尝试检查该元素，但没有出现错误，也没有carousel可见。下面是我的html代码：
null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/e7db147a51.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.carousel.min.css" />
<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" />
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="item"><img src="https://via.placeholder.com/150"></div>
<div class="item"><img src="https://via.placeholder.com/150"></div>
<div class="item"><img src="https://via.placeholder.com/150"></div>
</div>
</body>
<script src="jquery-3.5.1.min.js"></script>
<script src="index.js"></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"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
</html>null
这里是js代码：
null
$('.owl-carousel').owlCarousel({
stagePadding: 50,
loop:true,
margin:10,
nav:true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})null
共有1个答案
看看我的答案。起作用了。您需要像下面这样插入owlCarousel$('.owl-carousel').owlCarousel()；。
检查此演示
null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/e7db147a51.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="item"><img src="https://via.placeholder.com/1200"></div>
<div class="item"><img src="https://via.placeholder.com/1200"></div>
<div class="item"><img src="https://via.placeholder.com/1200"></div>
</div>
</body>
<script src="jquery-3.5.1.min.js"></script>
<script src="index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" ></script>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
});
</script>
</html>-
我想要一个包含三个项目的旋转木马，中间的项目以一种背景颜色居中（稍后是一个彩色的背景图像），左+右的项目以不同的颜色（稍后是带有灰度级滤镜的imagebackgrounds）。就像这个OWL1在http://codepen.io/owlfonk/pen/dpjhb上的旋转木马，但我想使用OWL2。 我好像不能挑出当前的项目？！我的旋转木马一直‘画’在中间和右边...我做错什么了？！越来越令人沮丧！
-
我需要添加猫头鹰轮播到我的网站。 我遵循了说明，并使用css作为默认主题。 它工作完美。然后突然（没有更改代码）默认主题停止工作（在导航上没有主题）... 我一直试图修复它，但我失去了我的想法...我甚至将更改还原到我确信它工作的地方！ 而且这不是关于浏览器的，因为我甚至把它上传到了我的服务器上... 我的代码： 和JS： 这似乎很奇怪，它曾经工作了一段时间，然后就停止了…… 任何帮助都将是感激的
-
我正在使用猫头鹰旋转木马2。我已经添加了一些比例动画到图像。 我有两个问题 我不想将滑块从右向左滑动。 如何重新启动动画？我的意思是，如果我刷新页面，那么动画是工作与两个图像，但我的幻灯片是循环的。我必须重新启动动画。 null null
-
我穿着magento 2.2.2和使用Unero主题，我正在开发magento前端。当我在内容部分添加OWL旋转木马滑块时，它是不可见的？
-
我正在玩一个boostrap主题是使用猫头鹰旋转木马。 这是我使用的主题 https://demo.themewagon.com/preview/free-html5-bootstrap-4-travel-agency-website-template-ecoland 正如您在链接中所看到的，猫头鹰旋转木马用于两个地方 用于页面顶部的英雄幻灯片 用于证明。 我想减慢滑梯的速度，让它们在悬停状态下停
-
我有麻烦让猫头鹰旋转木马主题样式表对我的滑块有任何影响？ 我使用的是最新版本的owl.carousel.2.0.0-beta.3 这里是我的测试地点：示例网站 下面是与owl旋转木马相关的HTML代码： 名为“owl.theme.default.min.css”的样式表看起来包含了所有的导航样式表，但由于某种原因，它没有对PREV和NEXT按钮进行样式化？ 如有任何帮助，我们将不胜感激。