我正在使用自己的傳送帶,因此要添加標題我遵循堆棧溢出this question但它不適用於我。然後我檢查了使用檢查元素,發現他們在我的輪播當前圖像上沒有「主動」類。所以我添加了腳本來這樣做。最後我的腳本看起來像這樣如何爲貓頭鷹傳送帶中的圖像添加標題
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
items: 1,
afterAction: function(el) {
//remove class active
this
.$owlItems
.removeClass('active')
//add class active
this
.$owlItems
.eq(this.currentItem)
.addClass('active')
},
onInitialized: function() {
var activeImg = $('.owl-carousel').find('.active').find('img');
var comment = activeImg.attr('alt');
var title = activeImg.attr('title');
if (comment) $('.image-caption').html('<h4>' + title + '</h4><p>' + comment + '</p>');
}
});
owl = $('.owl-carousel').owlCarousel();
$('.prev').click(function() {
owl.trigger('prev.owl.carousel');
});
$('.next').click(function() {
owl.trigger('next.owl.carousel');
});
owl.on('translated.owl.carousel', function(event) {
var activeImg = $(this).find('.active').find('img');
var comment = activeImg.attr('alt');
var title = activeImg.attr('title');
if (comment) $('.image-caption').html('<h4>' + title + '</h4><p>' + comment + '</p>');
});
});
該腳本無法正常工作。
我們不需要。不用顯示另一個圖像,只需以這種方式將圖像標題設置爲 我們只能顯示當前圖像的標題。 –
您應該閱讀「HTML