我将从一张图片开始，通过更改第四个 .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>
所以我所做的是使用 .active 类(一次有 5 个)获取 div，获取第四个 div 并向其添加 CSS，这样只使第四个更大.
在轮播中制作第四个 div 以更改页面加载时的高度以及与轮播的任何交互是我想要它做的。
希望我已经足够清楚了，第一篇关于 Stack Overflow 的帖子:)
最佳答案
owlCarousel 有 events您可以用来跟踪运动。
所以基本上您必须跟踪 next.owl.carousel 或 prev.owl.carousel 并通过添加更新您的 SizeChange() 函数或将当前突出显示的 div 位置减一。
编辑:事件甚至在 event.object 中传递信息。当前事件元素存储在 event.item.index 中。
关于javascript - 猫头鹰旋转木马 : How to change size of fourth item，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54503936/