各Owl Carouselスライドでヘッダーのロゴが変更されました

Question

私はOwl Carouselのスライドショーを4枚の写真が入っており、各スライドには画面全体が表示されます。スライドショーの最初の画像はほとんど青ですが、残りの画像はほとんど白です。

左上隅にあるヘッダーに2つのロゴ画像があります。 1つのロゴ画像は白で、2つ目は黒です。私は以下のコードに白いロゴだけを入れました。

ヘッダーとOwlカルーセルスライドショーの両方のHTMLコード。それは次のように

<div class="navbar-header"> 
    <h1 class="logo"> 
     <a class="" href="/main"><img src="images/white_logo.png"></a> 
    </h1> 
</div> 

<section class="visual"> 
    <div class="owl-carousel"> 
     <div class="item visual1"> 
      <div class="textbox"> 
       <div class="text"> 
        <span>Text for slide 1! Background picture is mostly blue.</span> 
       </div> 
      </div> 
     </div> 
     <div class="item visual2"> 
      <div class="textbox"> 
       <div class="text"> 
        <span>Text for slide 2! Background picture is mostly white.</span> 
       </div> 
      </div> 
     </div> 
     <div class="item visual3"> 
      <div class="textbox"> 
       <div class="text"> 
        <span>Text for slide 3! Background picture is mostly white.</span> 
       </div> 
      </div> 
     </div> 
     <div class="item visual4"> 
      <div class="textbox"> 
       <div class="text"> 
        <span>Text for slide 4! Background picture is mostly white.</span> 
       </div> 
      </div> 
     </div> 
    </div> 

はその後additonally、フクロウカルーセルのスクリプトは次のとおりです。

$('.visual .owl-carousel').owlCarousel({ 
    loop: true, 
    margin: 0, 
    nav: true, 
    center: true, 
    // autoplay:true, 
    // autoplayTimeout:3000, 
    // autoplayHoverPause:true, 
    responsive: { 
     0: { 
      items: 1 
      } 
     }, 
     onInitialized: function() { 
      repositionObj(); 
     }, 
     onResized: function() { 
      repositionObj(); 
     } 
    }); 

そして、最後にCSSは次のようになります。今のところ

.visual1 { 
    background: url(../images/bluepicture.png) no-repeat center; 
    background-size: cover; 
} 

.visual2 { 
    background: url(../images/whitepicture01.png) no-repeat center; 
    background-size: cover; 
} 

.visual3 { 
    background: url(../images/whitepicture02.png) no-repeat center; 
    background-size: cover; 
} 

.visual4 { 
    background: url(../images/whitepicture04.png) no-repeat center; 
    background-size: cover; 
} 

、私は4を持っているこの現在のコードで画像（一つの青色画像および3つの白いもの）が、スライドの各ピクチャの表示のみロゴ画像（white_logo.png）。白いロゴ画像は、画面全体をカバーするOwl Carouselの最初の画像が青色であるため、最初はうまくいきます。

しかし、フクロウカルーセルで次の3枚の画像は白いので、白のロゴ画像が消えているように見えるほとんどです。この問題に関して、私は黒で色付けされたこのロゴの別のバージョンを作成しました。

ホワイトのオールドカルーセルスライドショーの画像のみ、ヘッダーに黒いロゴを表示するにはどうしたらいいですか？ &が

black_logo.png & whitepicture01.png

black_logo.png &をbluepicture.png white_logo.png

• & whitepicture03をblack_logo.png whitepicture02.png
• ：いわば

  。 png

Answer 1

何か他のことが起こったときに、DOM内の何かを変更しようとしています。このためには、JavaScriptが必要です。 Owl CarouselにはイベントAPIがあります。イベントAPIは、何か起きたときに広告を出す（公開する）ことを意味します。物事を簡単にするために、彼らはevents demoをドキュメントに追加しました。

具体的には、translate.owl.carouselイベントを探しています。

これは、あなたがそれを使用することができる方法です。

今

$('.your-carousel-selector-here').on('translate.owl.carousel', function(event){ 
    // the custom code you need to run when the event happens 
    console.log(event); 
}) 

、あなたのカルーセルを使用する方法に応じて、あなたが探しているプロパティはevent.page.indexまたはevent.item.indexかもしれません。この練習の目的のために、私はそれがitemと仮定します。 は、このプロパティの値に基づいて、あなたはすべての私の仮定が正しければ、これは動作するはずh1.logo

内<img>のsrc属性を変更したい：

$('.visual .owl-carousel').on('translate.owl.carousel', function(event){ 
    $('h1.logo img').attr("src", event.item.index % event.item.count ? 
    '/images/black_logo.png' : 
    '/images/white_logo.png' 
); 
}) 

それが動作しない場合

、 2つの画像へのパスが正しいことを確認してください。それでも問題が解決しない場合は、 mcveを作成して、問題があるかどうかを調べて確認する必要があります。