jQuery 또는 JS (owl-carousel)를 사용하여 항목에 다른 항목의 하위 클래스 제공

이것은 내 문제입니다. 내 페이지에서 owl.carrousel MIT 라이브러리를 사용하고 있습니다. 이 라이브러리는 div를 자동으로 생성하여 표시되어야 할 때 클래스를 "활성"으로 지정합니다. 다른 "owl-item"이 활성화되었을 때 carrousel 섹션에서 다른 배경을 설정하고 싶습니다.

이것은 내 index.html 문서에있는 HTML 코드입니다.

<section id="testimonials">

      <div class="container">
        <div class="owl-carousel testimonials-carousel">

            <div class="testimonial-item Titem1">
              <h3>First carousel item</h3>
            </div>

            <div class="testimonial-item Titem2">
              <h3>Second carousel item</h3>
            </div>

            <div class="testimonial-item Titem3">
              <h3>Third carousel item</h3>
            </div>

            <div class="testimonial-item Titem4">
              <h3>Fourth carousel item</h3>
            </div>

        </div>
      </div>

</section>

이것은 owl.carrousel 라이브러리가 마술을 한 후에 페이지의 html 코드입니다.

<section id="testimonials">

    <div class="container">
        <div class="owl-carousel testimonials-carousel">

            <div class="owl-stage-outer">
                <div class="owl-stage">
                    <div class="owl-item active">
                        <div class="testimonial-item Titem1">
                            <h3>First carousel item</h3>
                        </div>
                    </div>
                 </div>
             </div>

            <div class="owl-stage-outer">
                <div class="owl-stage">
                    <div class="owl-item">
                        <div class="testimonial-item Titem2">
                            <h3>Second carousel item</h3>
                        </div>
                    </div>
                 </div>
             </div>

            <div class="owl-stage-outer">
                <div class="owl-stage">
                    <div class="owl-item">
                        <div class="testimonial-item Titem3">
                            <h3>Third carousel item</h3>
                        </div>
                    </div>
                 </div>
             </div>

            <div class="owl-stage-outer">
                <div class="owl-stage">
                    <div class="owl-item">
                        <div class="testimonial-item Titem4">
                            <h3>Fourth carousel item</h3>
                        </div>
                    </div>
                 </div>
             </div>

         </div>
     </div>
</section>

class = "owl-item active"자식 (표시되는 활성 평가 항목)과 함께 div를 사용하여 섹션 요소 id = "testimonials"에 클래스를 제공하기를 원하므로 매번 다른 .owl-item .active 클래스를 가져 오면 섹션의 배경도 변경됩니다. 나는 자바 스크립트와 jQuery로 그것을 시도했지만 나는 여전히 멍청한 xD이기 때문에 아무것도 나를 위해 일하지 않았다.

예를 들어 이것이 내가 마지막으로 시도한 것입니다.

$('#testimonials').addClass( $('.owl-item.active > .testimonial-item').attr("class") );

따라서 JS 또는 jQuery의 신이 나를 도울 수 있다면 pls : VI는 실제로 무엇을하고 있는지 모릅니다.

끝까지 읽어 주셔서 감사합니다;)