Question

我在我的网站上使用Owl Carousel（https://owlcarousel2.github.io/OwlCarousel2/）进行简单的轮播。我想在每张图片上显示不同的文字。

正如你所看到的，我可以点击这些点并改变哪一个是活跃的，但是我想创建一个小jQuery来改变引用文本＆amp;作者，当我这样做。

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>（#slider-arrow-left和#slider-arrow-right）的内容似乎未加载。它们是否在CSS中的任何位置定义，因为您似乎无法加载它......

检查：

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

要解决此问题，请在path|text|...中使用适当的<svg>。

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

    });
    }//]]>

轮播 - 将文本与滑块

2 个答案: