如何为owl轮播中的图像添加标题

Question

我正在使用自己的旋转木马，所以添加标题我跟着this question堆栈溢出但它不适合我。然后我使用inspect元素进行检查，发现它们在我的轮播当前图像上没有“活动”类。所以我添加了脚本来这样做。最后我的脚本看起来像这样

$(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>

Answer 2

@YosvelQuintero发布了脚本，但不知道他删除它的原因。如果有人需要，我会再次发布它。

<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>