0

Owl Carousel 2 を使用して画像スライダーを作成していますが、すべて動作していますが、現在、スライダーのコントロールにテキストのページネーションを追加しようとしています。画像の HTML に title 属性を追加し、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
    });
});

しかし、画面に表示されると、ここに順序があります..

ページャ

なんだか順番が全然違う…

ページャーに追加されたタイトルを表示するコンソール出力を追加しましたが、これも間違った順序です:/

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

1 に答える 1

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
    });
});
于 2016-05-18T09:57:29.617 に答える