Question

我正在使用Owl Carousel 2创建一个图像滑块，我已经完成了所有工作，但我目前正在尝试为滑块的控件添加文本分页。我将title属性添加到图像上的HTML，并使用javascript填充滑块的分页。

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

这是我的javascript代码：）

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

但是当它显示在屏幕上时，这是订单..

Pager

订单以某种方式完全错误..

我添加了一个控制台输出来显示添加到寻呼机的标题，这也是错误的顺序：/

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

Answer 1

在onInitialized事件之前创建一个数组：

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

Owl Carousel 2个分页标题不按顺序排列

1 个答案: