Carousel - associate text with images in slider

Question

I am using Owl Carousel for a simple carousel on my website. I'd like to have a different piece of text displaying over each image.

As you can see, I can click the dots and they change which one is active, but I'd like to create a little jQuery to change the quote text & author when I do this.

Demo: 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

It looks like the contents of your <svg>s (#slider-arrow-left and #slider-arrow-right) are not loading. Are they defined anywhere in your CSS, because you don't seem to load it...

To check:

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

To fix, use some proper path|text|... in your <svg>s.