我将通过更改第四个.item类的大小来进一步说明我的意思：
How the final carousel should look
这是我目前拥有的一半工作代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- head -->
<meta charset="utf-8">
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Basic usage demo">
<meta name="author" content="David Deutsch">
<title>
Basic Demo | Owl Carousel | 2.3.4
</title>
<!-- Stylesheets -->
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../assets/css/docs.theme.min.css">
<!-- Owl Stylesheets -->
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
<link rel="shortcut icon" href="favicon.ico">
<!-- Yeah i know js should not be in header. Its required for demos.-->
<!-- javascript -->
<script src="../assets/vendors/jquery.min.js"></script>
<script src="../assets/owlcarousel/owl.carousel.js"></script>
</head>
<body onload="SizeChange()">
<!-- Demos -->
<section id="demos">
<div class="row">
<div class="large-12 columns">
<div class="owl-carousel owl-theme">
<div class="item">
<h4>1</h4>
</div>
<div class="item">
<h4>2</h4>
</div>
<div class="item">
<h4>3</h4>
</div>
<div class="item">
<h4>4</h4>
</div>
<div class="item">
<h4>5</h4>
</div>
<div class="item">
<h4>6</h4>
</div>
<div class="item">
<h4>7</h4>
</div>
<div class="item">
<h4>8</h4>
</div>
<div class="item">
<h4>9</h4>
</div>
<div class="item">
<h4>10</h4>
</div>
<div class="item">
<h4>11</h4>
</div>
<div class="item">
<h4>12</h4>
</div>
</div>
<script>
//script
$(document).ready(function () {
var owl = $('.owl-carousel');
owl.owlCarousel({
margin: 10,
nav: true,
loop: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
})
$(window).click(SizeChange)
function SizeChange(){
let ActiveDivs = []
$("div").filter(".active").each(function (index, value) {
ActiveDivs.push(value)
})
let lengthOfArray = ActiveDivs.length-2
$(ActiveDivs).find('.item').animate({"height":"150px"}, 100);
$(ActiveDivs[lengthOfArray]).find('.item').animate({"height":"300px"}, 100);
}
//End script
</script>
<!-- vendors -->
<script src="../assets/vendors/highlight.js"></script>
<script src="../assets/js/app.js"></script>
</body>
</html>
因此，我要做的是将div与
.active类（一次有5个）一起使用，获取第四个div并添加CSS，从而仅使第四个更大。我希望在轮播中使第四个div更改页面加载以及与轮播的任何交互时的高度。
希望我弄清楚了，关于Stack Overflow的第一篇文章:)
最佳答案
owlCarousel具有events可用于跟踪运动。
因此，基本上，您必须跟踪next.owl.carousel或prev.owl.carousel并通过在当前突出显示的div位置添加或减去一个来更新SizeChange()函数。
编辑：事件甚至在event.object中传递信息。当前活动项目存储在event.item.index中。