jquery - 具有数据属性的 Owl-Carousel 无法加载
问题描述
我需要有关 Owl-Carousel 数据属性的帮助。
正如您在我的示例中看到的那样,在幻灯片 1 和 3 上,每个项目都有属性。唯一有效的事件是触发器,但不适用于幻灯片 1(第一张幻灯片)的负载。
先感谢您。
Codepen 中的示例 https://codepen.io/jafaris-mustafa/pen/XWJwjaZ
$('.owl-carousel').owlCarousel({
autoplay: true,
loop: true,
margin: 10,
autoHeight: true,
autoplayTimeout: 10000,
smartSpeed: 800,
nav: true,
items: 1,
});
var owl = $('.owl-carousel');
owl.on('changed.owl.carousel', function(property) {
var current = property.item.index;
var src = $(property.target).find(".owl-item").eq(current).find(".item").attr('setBgClr');
//console.log('Image current is ' + src);
if ($(property.target).find(".owl-item").eq(current).find(".item").is('[setBgClr]')) {
$(".heroes-wrap").css("background-color", src);
} else {
$(".heroes-wrap").css("background-color", "white");
}
});
body {
font-family: Arial, Helvetica, sans-serif;
}
.heroes-wrap {
margin: 2em;
padding: 1em;
}
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" />
<div class="heroes-wrap">
<div class="owl-carousel owlCarousel-item">
<div class="item" setBgClr="red">
<div class="heroes-txt">
<h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="item">
<div class="heroes-txt">
<h2>Slide 2</h2>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="item" setBgClr="#4CAF50">
<div class="heroes-txt">
<h2>Slide 3</h2>
<p>Orci nulla pellentesque dignissim enim. Nunc non blandit massa enim. At quis risus sed vulputate odio ut. Vulputate odio ut enim blandit volutpat maecenas. Massa id neque aliquam vestibulum morbi blandit.</p>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
解决方案
有一个事件initialized.owl.carousel
,它将在轮播初始化时触发。请注意,必须在 Owl Carousel 初始化之前附加initialize.owl.carousel
和事件。initialized.owl.carousel
利用这些事件在初始加载时更改颜色,检查更新的小提琴。
var owl = $('.owl-carousel');
owl.on('initialized.owl.carousel', function(property){
var current = property.item.index;
var src = $(property.target).find(".owl-item").eq(current).find(".item").attr('setBgClr');
if($(property.target).find(".owl-item").eq(current).find(".item").is('[setBgClr]')) {
$(".heroes-wrap").css("background-color", src);
} else {
$(".heroes-wrap").css("background-color", "white");
}
});
$('.owl-carousel').owlCarousel({
autoplay: true,
loop: true,
margin: 10,
autoHeight: true,
autoplayTimeout: 10000,
smartSpeed: 800,
nav: true,
items: 1,
});
owl.on('changed.owl.carousel',function(property){
var current = property.item.index;
var src = $(property.target).find(".owl-item").eq(current).find(".item").attr('setBgClr');
if($(property.target).find(".owl-item").eq(current).find(".item").is('[setBgClr]')) {
$(".heroes-wrap").css("background-color", src);
} else {
$(".heroes-wrap").css("background-color", "white");
}
});
body {font-family:Arial, Helvetica, sans-serif;}
.heroes-wrap {margin:2em; padding:1em;}
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<div class="heroes-wrap">
<div class="owl-carousel owlCarousel-item">
<div class="item" setBgClr="red">
<div class="heroes-txt">
<h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="item">
<div class="heroes-txt">
<h2>Slide 2</h2>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="item" setBgClr="#4CAF50">
<div class="heroes-txt">
<h2>Slide 3</h2>
<p>Orci nulla pellentesque dignissim enim. Nunc non blandit massa enim. At quis risus sed vulputate odio ut. Vulputate odio ut enim blandit volutpat maecenas. Massa id neque aliquam vestibulum morbi blandit.</p>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
推荐阅读
- javascript - JS array.map() returns undefined
- c# - 更改大小后如何重新排列按钮之间的空格?
- cassandra - 是否在节点之间同步了 memtable 刷新
- java - java.lang.NoSuchMethodError 在类 Ljava.lang.Object 中没有 name='getStatusCode' signature='()I' 的非静态方法;
- python-3.x - 在 Azure 机器学习 python SDK 中传递给 automl_classifier 的图像数据遇到 EmptyDataException 错误
- json - 如何从 URL 读取 JSON,将 FLOAT 输出到应用程序屏幕?SwiftUI
- oracle - 为什么这个 SELECT 语句需要 INTO 子句
- html - 从 R markdown 将错误上传到 Rpubs rawToChar(response$headers) 中的错误:参数“x”必须是原始向量
- python - 通过 CMD 安装软件包时出错
- php - 为什么我不能更新数据?