javascript - 如何在 Owl Carousel 中为图像添加标题

Question

我正在使用自己的轮播，所以要添加标题，我遵循了 this question堆栈溢出，但对我不起作用。然后我使用 inspect element 检查并发现它们在我的轮播当前图像上没有“事件”类。所以我添加了脚本来这样做。最后我的脚本是这样的

$(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>');
    });
});

脚本无法正常工作。

Answer 1

在此解决方案中，我使用 HTML figcaption表示与 HTML figure 关联的标题或图例的元素.

我还在 OWL Carousel 添加了所有需要的逻辑afterMove 移动回调后:

$('.owl-carousel').owlCarousel({
    loop: true,
    items: 1,
    navigation: true,
    pagination: true,
    lazyLoad: true,
    singleItem: 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'),
                'alt': currentImg.attr('alt'),
                'title': currentImg.attr('title')
            });
        $('#figcaption').text(currentImg.attr('title'));
    }
});

.owl-carousel .owl-item img {
    display: block;
    width:80%;
    height:100px;
}

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

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

<figure id="currentImageWithCaption">
    <img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Title 1" width="50" height="30">
    <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>