javascript - How to add captions for images in owl carousel - Stack Overflow

admin管理员组

文章数量:1402852

I'm using own carousel, so to add caption I followed this question on stack overflow but it didn't work for me. Then I checked using inspect element and found that their is no 'active' class on my carousel current image. So I added script to do so. In the end my script look like this

$(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 ment = activeImg.attr('alt');
            var title = activeImg.attr('title');
            if (ment) $('.image-caption').html('<h4>' + title + '</h4><p>' + ment + '</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 ment = activeImg.attr('alt');
        var title = activeImg.attr('title');
        if (ment) $('.image-caption').html('<h4>' + title + '</h4><p>' + ment + '</p>');
    });
});

The script is not working properly.

I'm using own carousel, so to add caption I followed this question on stack overflow but it didn't work for me. Then I checked using inspect element and found that their is no 'active' class on my carousel current image. So I added script to do so. In the end my script look like this

$(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 ment = activeImg.attr('alt');
            var title = activeImg.attr('title');
            if (ment) $('.image-caption').html('<h4>' + title + '</h4><p>' + ment + '</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 ment = activeImg.attr('alt');
        var title = activeImg.attr('title');
        if (ment) $('.image-caption').html('<h4>' + title + '</h4><p>' + ment + '</p>');
    });
});

The script is not working properly.

• javascript
• jquery
• html
• owl-carousel

Share Improve this question Follow edited May 23, 2017 at 12:32 CommunityBot 111 silver badge asked Jul 16, 2016 at 7:48 Sabique A KhanSabique A Khan 5511 gold badge11 silver badge1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

In this solution i am using HTML figcaption element that represents a caption or a legend associated with a HTML figure.

Also i have added all the needed logic at OWL Carousel afterMove after move callback:

$('.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./ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare./ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare./ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" />

<script src="//cdnjs.cloudflare./ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare./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>

@YosvelQuintero posted the script but don't know why he deleted it. So I am posting it again in case if anybody need it.

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare./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./ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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>

本文标签： javascriptHow to add captions for images in owl carouselStack Overflow