После задания высоты элемента div в карусели сов, если щелкнуть по точкам или стрелка навигации не работает?

Question

Я пытаюсь добавить совую карусель на свой сайт. После задания высоты элемента div в карусели сов, если щелкнуть точки или стрелку, слайды не движутся. Но если я удаляю высоту (class = 'item'), а затем, если я нажимаю на точки или стрелки, слайды движутся.

<!---html-->
<section class='about' id='project'>
    <div class='title'>
        <p>Projects</p>
    </div>
    <div class='projects'>
        <div id="owl-demo" class="owl-carousel owl-theme owls">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 240"><path fill="#D81C4A" fill-opacity="0.2" d="M0,192L360,128L720,192L1080,160L1440,224L1440,320L1080,320L720,320L360,320L0,320Z"></path>
        </svg>
    </div>
</section>

<!---css-->
.projects{
    width:100%;
    height:530px;
    overflow: hidden;
    position: relative;
}
.owls{
    position: absolute;
    top:38%;
    transform:translateY(-50%);
    height:240px;
}
.item{
    height:200px;
    margin:20px 40px;
    border-radius:8px;
    box-shadow: 0 4px 20px 0 rgb(216, 28, 74,0.6);
}
.projects svg{
    position: absolute;
    bottom: 0;
    z-index:1111;
}

<!---jquery-->
  $("#owl-demo").owlCarousel({
  loop:true,
  margin:10,
  nav:true,
  responsive:{
      0:{
        items:1
      },
      1002:{
        items:1
      }
  }
})

Answer 1

Когда вы явно устанавливаете height для элементов div class="item", ваша карусель растет до тех пор, пока она не окажется под вашим элементом svg (который абсолютным образом позиционируется с z-index выше 0).

Верхняя часть вашего SVG прозрачна, поэтому вы этого не заметили. Тем не менее, он покрывает навигацию.

Удаление z-index элемента svg было бы достаточно, чтобы увидеть, как работает навигация, хотя, я думаю, вам следует переделать свой макет.