カルーセル - スライダ内の画像にテキストを関連付けます

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

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

    }); 
    }//]]> 

Answer 2

<svg>（#slider-arrow-leftと#slider-arrow-right）の内容が読み込まれていないようです。

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

をご<svg>秒でいくつかの適切なpath|text|...を使用し、修正するには：あなたはそれをロードしていないようですので、彼らは確認するには...、あなたのCSS内のどこにでも

を定義しています。