我尝试了很多次，但现在我的错误在哪里。为什么对我不起作用？它是“OWL CAROUSEL CUSTOM”。我尝试了许多类型的旋转木马猫头鹰和任何在我的电脑上运行的。我非常需要工作。这是我在这一刻使用的 HTML 和 CSS 代码。我将所有文件都放在 html 的头部。我现在很容易做对，但我做不到。
#owl-demo .item{
background: #3fbf79;
padding: 30px 0px;
margin: 10px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
.customNavigation{
text-align: center;
}
//use styles below to disable ugly selection
.customNavigation a{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/estilo.css">
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="css/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="css/owl.theme.css">
<!-- jQuery 1.7+ -->
<script src="js/jquery-1.9.1.min.js"></script>
<!-- Include js plugin -->
<script src="js/owl.carousel.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
// Custom Navigation Events
$(".next").click(function(){
owl.trigger('owl.next');
})
$(".prev").click(function(){
owl.trigger('owl.prev');
})
$(".play").click(function(){
owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as second parameter
})
$(".stop").click(function(){
owl.trigger('owl.stop');
})
});
</script>
</head>
<body>
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
<div class="item"><h1>13</h1></div>
<div class="item"><h1>14</h1></div>
<div class="item"><h1>15</h1></div>
<div class="item"><h1>16</h1></div>
</div>
<div class="customNavigation">
<a class="btn prev">Previous</a>
<a class="btn next">Next</a>
<a class="btn play">Autoplay</a>
<a class="btn stop">Stop</a>
</div>
</body>
</html>最佳答案
工作演示
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
// Custom Navigation Events
$(".next").click(function(){
owl.trigger('owl.next');
})
$(".prev").click(function(){
owl.trigger('owl.prev');
})
$(".play").click(function(){
owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as second parameter
})
$(".stop").click(function(){
owl.trigger('owl.stop');
})
});#owl-demo .item{
background: #3fbf79;
padding: 30px 0px;
margin: 10px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
.customNavigation{
text-align: center;
}
//use styles below to disable ugly selection
.customNavigation a{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css" rel="stylesheet"/>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
<div class="item"><h1>13</h1></div>
<div class="item"><h1>14</h1></div>
<div class="item"><h1>15</h1></div>
<div class="item"><h1>16</h1></div>
</div>
<div class="customNavigation">
<a class="btn prev">Previous</a>
<a class="btn next">Next</a>
<a class="btn play">Autoplay</a>
<a class="btn stop">Stop</a>
</div>你已经包含了两次 jquery 版本..删除它并首先在 js 部分添加 jquery
关于javascript - 为什么我的 Owl Carousel 在我的第一组中不起作用？请问我的eero在哪里？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35361564/