CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vijay
Vijay

Reputation: 111

After giving height to item div in owl carousel if clicked on dots or arrow navigation doesn't work?

I am trying to add the owl carousel to my website. After giving height to item div in owl carousel if click on dots or arrow the slides are not moving. But if I remove the height(class='item') and then if I click on dots or arrow slides are moving.

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

Upvotes: 1

Views: 255

Answers (1)

David
David

Reputation: 7305

When you explicitly set a height for the div class="item" elements, you carousel grows until it gets under your svg element (which is absoluted positioned with a z-index higher than 0).

The upper part of your SVG is transparent, that's why you didn't notice it. Still, it is covering the navigation.

Removing the z-index of the svg element would be enough to see the navigation working, although I guess you should rework your layout.

Upvotes: 1

Related Questions