傳送帶 - 將文本與滑塊中的圖像關聯

我在我的網站上使用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] 
    }); 
});

非常感謝

來源

2017-02-13 michaelmcgurk

我有這個插件的經驗，但你的例子不起作用，我不完全理解你的需求。 – Marian07

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

    }); 
    }//]]>

來源

2017-02-14 07:53:01 michaelmcgurk

看起來您的<svg>的內容（#slider-arrow-left和#slider-arrow-right）未加載。他們是在你隨時隨地CSS定義，因爲你似乎沒有加載它...

檢查：

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

要修復，請使用您<svg>小號一些適當的path|text|...。

來源

2017-02-13 22:04:30

傳送帶 - 將文本與滑塊中的圖像關聯

回答

相關問題