我正在使用 Owl Carousel 2 制作图像滑块,并且一切正常,但我目前正在尝试将文本分页添加到滑块的控件中。我在图像的 HTML 中添加了 title 属性,并使用 javascript 来填充滑块的分页。
这是HTML:
<div class="rri-carousel owl-theme owl-carousel owl-loaded">
<div class="owl-stage-outer">
<div class="owl-stage" style="transform: translate3d(-9192px, 0px, 0px); transition: 0s; -webkit-transition: 0s; width: 13788px;">
<div class="owl-item cloned" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Agriculture_4.jpg" title="Agriculture" data-thumb="http://example.com/wp-content/uploads/2015/05/Agriculture_4.jpg" alt="Agriculture">
</div>
</div>
<div class="owl-item cloned" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2012/05/Equine.jpg" title="Equine" data-thumb="http://example.com/wp-content/uploads/2012/05/Equine.jpg" alt="Equine">
</div>
</div>
<div class="owl-item" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Salt_and_Sand2.jpg" title="Salt & Sand" data-thumb="http://example.com/wp-content/uploads/2015/05/Salt_and_Sand2.jpg" alt="Salt & Sand">
</div>
</div>
<div class="owl-item" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Fertilizer2.jpg" title="Fertilizer" data-thumb="http://example.com/wp-content/uploads/2015/05/Fertilizer2.jpg" alt="Fertilizer">
</div>
</div>
<div class="owl-item" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Commercial_2.jpg" title="Commercial" data-thumb="http://example.com/wp-content/uploads/2015/05/Commercial_2.jpg" alt="Commercial">
</div>
</div>
<div class="owl-item" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Agriculture_4.jpg" title="Agriculture" data-thumb="http://example.com/wp-content/uploads/2015/05/Agriculture_4.jpg" alt="Agriculture">
</div>
</div>
<div class="owl-item active" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2012/05/Equine.jpg" title="Equine" data-thumb="http://example.com/wp-content/uploads/2012/05/Equine.jpg" alt="Equine">
</div>
</div>
<div class="owl-item cloned" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Salt_and_Sand2.jpg" title="Salt & Sand" data-thumb="http://example.com/wp-content/uploads/2015/05/Salt_and_Sand2.jpg" alt="Salt & Sand">
</div>
</div>
<div class="owl-item cloned" style="width: 1532px; margin-right: 0px;">
<div class="item">
<img src="http://example.com/wp-content/uploads/2015/05/Fertilizer2.jpg" title="Fertilizer" data-thumb="http://example.com/wp-content/uploads/2015/05/Fertilizer2.jpg" alt="Fertilizer">
</div>
</div>
</div>
</div>
<div class="owl-controls">
<div class="owl-nav">
<div class="owl-prev" style="display: none;">prev</div>
<div class="owl-next" style="display: none;">next</div>
</div>
<div class="owl-dots" style="">
<div class="owl-dot"><span>Agriculture</span></div>
<div class="owl-dot"><span>Equine</span></div>
<div class="owl-dot"><span>Salt & Sand</span></div>
<div class="owl-dot"><span>Fertilizer</span></div>
<div class="owl-dot active"><span>Commercial</span></div>
</div>
</div>
</div>
这是我的javascript代码:)
$(document).ready(function () {
var owl = $('.rri-carousel');
function customPager() {
$.each($(owl).find('.item'), function (i) {
var titleData = $(this).find('img').attr('title');
console.log(titleData);
var paginationLinks = $('.owl-controls .owl-dots .owl-dot span');
$(paginationLinks[i]).append(titleData);
});
}
owl.owlCarousel({
loop : true,
items : 1,
nav : false,
autoplay : true,
onInitialized : customPager
});
});
但是当它显示在屏幕上时,这里是命令..
不知何故,顺序完全错误..
我添加了一个控制台输出来显示添加到寻呼机的标题,这也是错误的顺序:/
Agriculture
Equine
Salt & Sand
Fertilizer
Commercial
Agriculture
Equine
Salt & Sand
Fertilizer