Question

此代码是否仍然有效？我尝试过，但是很遗憾，它没有用... 我正在使用OwlCarousel2-2.3.4版本。当我加载.JS代码并放入ID #figcaption时，该图没有出现。我不知道为什么它不起作用...

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" />

<figure id="currentImageWithCaption">
    <img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Title 1" width="200" height="150">
    <figcaption id="figcaption">Title 1</figcaption>
</figure>

<div class="owl-carousel">
    <div class="item">
        <img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Alt 1" />
    </div>
    <div class="item">
        <img src="https://malsup.github.io/images/p2.jpg" title="Title 2" alt="Alt 2" />
    </div>
    <div class="item">
        <img src="https://malsup.github.io/images/p3.jpg" title="Title 3" alt="Alt 3" />
    </div>
    <div class="item">
        <img src="https://malsup.github.io/images/p4.jpg" title="Title 4" alt="Alt 4" />
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

<style>
figure img {
display: block;
width:100%;
height: auto;
}
.owl-wrapper-outer{
    display : none;
}
</style>

<script>
    $('.owl-carousel').owlCarousel({
        loop: true,
        items: 1,
        navigation: true,
        pagination: true,
        lazyLoad: true,
        afterMove: function(elem) {
            var current = this.currentItem;
            var currentImg = elem.find('.owl-item').eq(current).find('img');

            $('figure')
                .find('img')
                .attr('src', currentImg.attr('src'))
                .attr('alt', currentImg.attr('alt'))
                .attr('title', currentImg.attr('title'));
            $('#figcaption').text(currentImg.attr('title'));
        }
    });
</script>

感谢您的帮助！

Answer 1

您可以为此使用translated.owl.carousel事件

这是工作中的Fiddle

owl.on('translated.owl.carousel', function(event) {
     var comment = $(this).find('.active').find('img').attr('alt');
    var title = $(this).find('.active').find('img').attr('title');
    if(comment) $('.image-caption').html('<h4>'+title+'</h4><p>'+comment+'</p>');
});

更新：

略有改进的代码并添加了更新图像标题的功能轮播负载。

FIDDLE

如何为猫头鹰轮播2-2.3.4中的图像添加标题？

1 个答案: