輪播 - 將文本與滑塊中的圖像相關聯

Question

我在我的網站上使用Owl Carousel （ https://owlcarousel2.github.io/OwlCarousel2/ ）進行簡單的輪播。 我想在每張圖片上顯示不同的文字。

正如您所看到的，我可以單擊這些點並更改哪一個是活動的，但是我想創建一個小jQuery來更改引用文本和作者。

演示： http ： //jsfiddle.net/fq77rd1d/

HTML：

<div class="hero-form lazy">
    <div class="hero-carousel / owl-carousel js-hero-carousel">
        <div class="hero-carousel__item owl-lazy" style="background:url('https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500') 0 0 no-repeat"></div>
    <div class="hero-carousel__item owl-lazy" style="background:url('https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500') 0 0 no-repeat"></div>
    </div>
    <div class="hero-form__inner container">
        <div class="container">
            <div class="row">
                <div class="col-md-6 pull-md-6">
                    <div class="hero-form__footer">
                        <div class="hero-form__quote">
                            <blockquote>
                                <p>&ldquo;Quote 1&rdquo;</p><span class="cite">Author</span>
                            </blockquote>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="hero-carousel-nav owl-nav">
        <div class="owl-prev"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#slider-arrow-left"></use></svg></div>
        <div class="owl-next"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#slider-arrow-right"></use></svg></div>
    </div><span class="hero-overlay"></span>
</div>

使用Javascript：

$(document).ready(function () {
    $(".owl-carousel").owlCarousel({

        autoPlay: 3000, //Set AutoPlay to 3 seconds
        dots: true,
        items: 2,
        itemsDesktop: [1199, 3],
        itemsDesktopSmall: [979, 3]
    });
});

非常感謝

Answer 1

看起來你的<svg> s（ #slider-arrow-left和#slider-arrow-right ）的內容沒有加載。 它們是否在CSS任何位置定義，因為您似乎沒有加載它...

去檢查：

.owl-prev > svg, .owl-next > svg { background: red; }

要修復，請在<svg>使用一些正確的path|text|...

Answer 2

window.onload=function(){
    jQuery(document).ready(function($){

        var text = $('div.owl-item.active div').find('span').html();
        $('div.hero-form__quote blockquote').html(text);

            $('.owl-next').click(function () {
                var text = $('div.owl-item.active div').find('span').html();
                $('div.hero-form__quote blockquote').html(text);
            });

            $('.owl-prev').click(function () {
                var text = $('div.owl-item.active div').find('span').html();
                $('div.hero-form__quote blockquote').html(text);
            });

    });
    }//]]>