Javascript 如何在owl转盘中为图像添加标题

我使用的是自己的旋转木马，所以为了添加标题，我在堆栈溢出时遵循了这个方法，但它对我不起作用。然后，我使用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>');
    });
});

$（文档）.ready（函数（）{
$（'.owl carousel'）。owl carousel({
循环：对，
项目：1，
后遗症：功能（el）{
//删除活动类
这
.$项目
.removeClass（'活动'）
//添加活动类
这
.$项目
.eq（此.currentItem）
.addClass（“活动”）
},
初始化：函数（）{
var activeImg=$（'.owl carousel'）.find（'.active'）.find（'img'）；
var comment=activeImg.attr（'alt'）；
var title=activeImg.attr（'title'）；
if（comment）$（'.image caption'）.html（''+title+''+comment+'
'）；
}
});
owl=$（'.owl carousel'）.owlCarousel（）；
$（'.prev'）。单击（函数（）{
owl.trigger（'prev.owl.carousel'）；
});
$（'.next'）。单击（函数（）{
触发器（'next.owl.carousel'）；
});
on（'translated.owl.carousel'，函数（事件）{
var activeImg=$（this.find（'.active'）.find（'img'）；
var comment=activeImg.attr（'alt'）；
var title=activeImg.attr（'title'）；
if（comment）$（'.image caption'）.html（''+title+''+comment+'
'）；
});
});

---

脚本工作不正常。

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

此外，我还在

afterMove

afterMove回调中添加了所有需要的逻辑：

$（'.owl carousel'）.owlCarousel({
循环：对，
项目：1，
导航：对，
分页：正确，
懒汉：没错，
单项：对，
后移：功能（elem）{
var current=此.currentItem；
var currentImg=elem.find（'.owl item'）.eq（current.find（'img'）；
$（“数字”）
.find（'img'））
艾特先生({
'src'：currentImg.attr（'src'），
“alt”：currentImg.attr（'alt'），
'title'：currentImg.attr（'title'）
});
$（'figcaption'）.text（currentImg.attr（'title'）；
}
});
.owl carousel.owl项目img{
显示：块；
宽度：80%；
高度：100px；
}

标题1
@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>


标题1
图img{
显示：块；
宽度：100%；
高度：自动；
}
.猫头鹰外套{
显示：无；
}
$（'.owl carousel'）。owl carousel({
循环：对，
项目：1，
导航：对，
分页：正确，
懒汉：没错，
后移：功能（elem）{
var current=此.currentItem；
var currentImg=elem.find（'.owl item'）.eq（current.find（'img'）；
$（“数字”）
.find（'img'））
.attr（'src'，currentImg.attr（'src'））
.attr（'alt'，currentImg.attr（'alt'））
.attr（'title'，currentImg.attr（'title'）；
$（'figcaption'）.text（currentImg.attr（'title'）；
}
});
更新了我的回复，我们不需要。。。。不显示另一个图像，只需将图像标题设置为，这样我们就可以只显示当前图像的标题。您应该读取
HTML
：但现在您可以根据自己的解决方案配置脚本