올빼미 회전 목마 슬라이드마다 머리글의 로고가 바뀝니다.

Question

내 사진에 올빼미 회전식 슬라이드 쇼가 있습니다.이 슬라이드에는 네 장의 그림이 들어 있으며 각 슬라이드에는 전체 화면이 표시됩니다. 슬라이드 쇼의 첫 번째 사진은 대부분 파란색이지만 나머지 사진은 대부분 흰색입니다.

헤더 왼쪽 상단 모서리에 두 개의 로고 사진이 있습니다. 하나의 로고 이미지는 흰색이고 두 번째 로고는 검정색입니다. 아래 코드에는 흰색 로고 만 포함되었습니다.

헤더 및 올빼미 회전식 슬라이드 쇼 슬라이드의 HTML 코드입니다.

$('.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; 
} 

지금, 내가 네가이 현재 코드로는 다음과 같이

<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, 올빼미 회전 목마를위한 스크립트입니다 사진 하나 (파란색 사진 한 개와 흰색 사진 세 개)가 있지만 슬라이드의 각 사진에 대해 하나의 로고 이미지 (white_logo.png) 만 표시됩니다. 흰색 로고 이미지는 전체 화면을 덮고있는 올빼미 회전식 그림의 첫 번째 그림이 파란색이므로 처음에는 문제가 없습니다.

그러나 Owl 회전식 캐 러셀의 다음 세 이미지는 대부분 흰색이므로 흰색 로고 이미지가 사라지는 것처럼 보입니다. 이 문제를 해결하기 위해 검정색으로 칠해진이 로고의 다른 버전을 만들었습니다. 그것을 부르 자 (black_logo.png)

푸른 그림의 경우 흰색이지만 흰색 로고 인 Owl Carousel 슬라이드 쇼의 그림 만 헤더에 검은 색 로고를 표시하려면 어떻게해야합니까?

말하자면 :

• white_logo.png &는 & whitepicture03을 black_logo.png & whitepicture02.png
• black_logo.png & whitepicture01.png
• 을 black_logo.png
• 을 bluepicture.png. PNG

Answer 1

뭔가 다른 일이 생기면 DOM에서 뭔가를 변경하려고합니다. 이를 위해서는 자바 스크립트가 필요합니다. Owl Carousel에는 이벤트 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' 
); 
}) 

작동하지 않는 경우

, 두 이미지의 경로가 올바른지 확인하십시오. 그래도 작동하지 않는다면 다른 문제가 있는지 검사하고 확인할 수있는 mcve을 만들어야합니다.