Owl Carousel 2 pagenation titles not in order

Question

I'm making a image slider using Owl Carousel 2 and I have it all working but I'm currently trying to add text pagination to the controls for the slider. I added the title attribute to the HTML on the images and used javascript to populate the pagination for the slider.

Here is the HTML:

<div class="rri-carousel owl-theme owl-carousel owl-loaded">
    <div class="owl-stage-outer">
        <div class="owl-stage" style="transform: translate3d(-9192px, 0px, 0px); transition: 0s; -webkit-transition: 0s; width: 13788px;">
            <div class="owl-item cloned" style="width: 1532px; margin-right: 0px;">
                <div class="item">
                    <img src="http://example.com/wp-content/uploads/2015/05/Agriculture_4.jpg" title="Agriculture" data-thumb="http://example.com/wp-content/uploads/2015/05/Agriculture_4.jpg" alt="Agriculture">
                </div>
            </div>
            <div class="owl-item cloned" style="width: 1532px; margin-right: 0px;">
                <div class="item">
                    <img src="http://example.com/wp-content/uploads/2012/05/Equine.jpg" title="Equine" data-thumb="http://example.com/wp-content/uploads/2012/05/Equine.jpg" alt="Equine">
                </div>
            </div>
            <div class="owl-item" style="width: 1532px; margin-right: 0px;">
                <div class="item">
                    <img src="http://example.com/wp-content/uploads/2015/05/Salt_and_Sand2.jpg" title="Salt &amp; Sand" data-thumb="http://example.com/wp-content/uploads/2015/05/Salt_and_Sand2.jpg" alt="Salt &amp; Sand">
                </div>
            </div>
            <div class="owl-item" style="width: 1532px; margin-right: 0px;">
                <div class="item">
                    <img src="http://example.com/wp-content/uploads/2015/05/Fertilizer2.jpg" title="Fertilizer" data-thumb="http://example.com/wp-content/uploads/2015/05/Fertilizer2.jpg" alt="Fertilizer">
                </div>
            </div>
            <div class="owl-item" style="width: 1532px; margin-right: 0px;">
                <div class="item">
                    <img src="http://example.com/wp-content/uploads/2015/05/Commercial_2.jpg" title="Commercial" data-thumb="http://example.com/wp-content/uploads/2015/05/Commercial_2.jpg" alt="Commercial">
                </div>
            </div>
            <div class="owl-item" style="width: 1532px; margin-right: 0px;">
                <div class="item">
                    <img src="http://example.com/wp-content/uploads/2015/05/Agriculture_4.jpg" title="Agriculture" data-thumb="http://example.com/wp-content/uploads/2015/05/Agriculture_4.jpg" alt="Agriculture">
                </div>
            </div>
            <div class="owl-item active" style="width: 1532px; margin-right: 0px;">
                <div class="item">
                    <img src="http://example.com/wp-content/uploads/2012/05/Equine.jpg" title="Equine" data-thumb="http://example.com/wp-content/uploads/2012/05/Equine.jpg" alt="Equine">
                </div>
            </div>
            <div class="owl-item cloned" style="width: 1532px; margin-right: 0px;">
                <div class="item">
                    <img src="http://example.com/wp-content/uploads/2015/05/Salt_and_Sand2.jpg" title="Salt &amp; Sand" data-thumb="http://example.com/wp-content/uploads/2015/05/Salt_and_Sand2.jpg" alt="Salt &amp; Sand">
                </div>
            </div>
            <div class="owl-item cloned" style="width: 1532px; margin-right: 0px;">
                <div class="item">
                    <img src="http://example.com/wp-content/uploads/2015/05/Fertilizer2.jpg" title="Fertilizer" data-thumb="http://example.com/wp-content/uploads/2015/05/Fertilizer2.jpg" alt="Fertilizer">
                </div>
            </div>
        </div>
    </div>
    <div class="owl-controls">
        <div class="owl-nav">
            <div class="owl-prev" style="display: none;">prev</div>
            <div class="owl-next" style="display: none;">next</div>
        </div>
        <div class="owl-dots" style="">
            <div class="owl-dot"><span>Agriculture</span></div>
            <div class="owl-dot"><span>Equine</span></div>
            <div class="owl-dot"><span>Salt &amp; Sand</span></div>
            <div class="owl-dot"><span>Fertilizer</span></div>
            <div class="owl-dot active"><span>Commercial</span></div>
        </div>
    </div>
</div>

and here is my javascript code :)

$(document).ready(function () {
    var owl = $('.rri-carousel');

    function customPager() {
        $.each($(owl).find('.item'), function (i) {
            var titleData = $(this).find('img').attr('title');
            console.log(titleData);
            var paginationLinks = $('.owl-controls .owl-dots .owl-dot span');
            $(paginationLinks[i]).append(titleData);
        });
    }

    owl.owlCarousel({
        loop          : true,
        items         : 1,
        nav           : false,
        autoplay      : true,
        onInitialized : customPager
    });
});

But when it gets displayed on the screen here is the order..

The order is completely wrong somehow..

I added a console output to display the titles as they are added to the pager and here is the order which is wrong as well :/

Agriculture
Equine
Salt & Sand
Fertilizer
Commercial
Agriculture
Equine
Salt & Sand
Fertilizer

Answer 1

Create an array before the onInitialized event:

$(document).ready(function () {
    var owl = $('.rri-carousel');

    var dots_label = [];

    $.each($(owl).find('.item'), function (i) {
      dots_label.push($(this).find('img').attr('title'));
    });

    function customPager() {
        $.each($(owl).find('.owl-dot'), function (i) {
            var paginationLinks = $('.owl-controls .owl-dots .owl-dot span');
            $(paginationLinks[i]).append(dots_label[i]);
        });
    }

    owl.owlCarousel({
        loop          : true,
        items         : 1,
        nav           : false,
        autoplay      : true,
        onInitialized : customPager
    });
});