[Resolved] Integrating Owl carousel into GP Theme

[Jan]

It pushes the carousel items together. The prev and next-button remain invisible ;-/

[David]

Try swapping the single and double quotes eg.:

navText:['<div class="nav-btn prev-slide"><img width=60 height=60 src="full_url_to_the_previous_icon.jpg" /></div>','<div class="nav-btn next-slide"><img width=60 height=60 src="full_url_to_the_next_icon.jpg" /></div>'],

[Jan]

Much better 😉

I removed this (redundant) part of the css:

#leistungsmerkmale .owl-carousel .prev-slide{
      background: url("https://bt3cqo2v.myraidbox.de/wp-content/uploads/Form_Pfeil_links.png") no-repeat scroll 0 0;
      left: -33px;
  }
#leistungsmerkmale .owl-carousel .next-slide{
      background: url(https://bt3cqo2v.myraidbox.de/wp-content/uploads/Form_Pfeil_rechts.png) no-repeat scroll -24px 0px;
      right: -33px;
  }

The last step is to make the buttons appear left an right from the carousel.

Any idea why the remaining CSS does not trigger this?

/* Owl carousel - Position and style navigation icons */

#leistungsmerkmale button {
    background-color: #ffffff;
}

#leistungsmerkmale .carousel-wrap {
    width: 1000px;
    margin: auto;
    position: relative;
  }
#leistungsmerkmale .owl-carousel .owl-nav{
    overflow: hidden;
    height: 0px;
  }

#leistungsmerkmale .owl-carousel .owl-prev.disabled,
  .owl-carousel .owl-next.disabled{
    pointer-events: none;
    opacity: 0.2;
  }

#leistungsmerkmale .owl-carousel .prev-slide:hover{
     background-position: 0px -53px;
  }
#leistungsmerkmale .owl-carousel .next-slide:hover{
    background-position: -24px -53px;
  }

Thanks,
Jan

[David]

Try this instead:

.owl-drag .owl-nav > button  {
    position: absolute;
    top: 50%;
    z-index: 100;
}
.owl-drag .owl-nav .owl-prev {
    left: 0;
}
.owl-drag .owl-nav .owl-next {
    right: 0;
}

[Jan]

Many thanks David. I sense we are almost there.

When I replace the CSS the navigation buttons seem to move behind the subsequent container block. See screen recording.

I also checked the top margin of the subsequent container (#podcast) but could not fin anything that would explain why the buttons move behind the container ;-/

Any thoughts?

Thanks,
Jan

[David]

Where can i see this ?

[Jan]

In the beginning of the screen recording I hover over the owl-nav div on the right hand side (google debugger console). When I click on the div in the debugger the location of the relevant item is revealed on the main screen (just above the grey colored container of the podcast section).

Maybe I’m wrong, but this is how I would interpret this screen capture.

What do yo think?

[Jan]

Hi David,

I just noticed that the prev/next buttons are now located at the very top of the page 😉

With that I may be able to get the remaining fixed myself. I’ll keep you posted.

Really sorry to take this much of your valuable time. Your support has been extremely helpful and is highly appreciated.

Best,
Jan

[David]

Glad to be of help

[Jan]

Hi David,

after adding the ID of relevant carousel from the Elements Hook jQuery('#leistungsmerkmale').owlCarousel({..., to your CSS the next/ prev buttons are now located below the carousel. The top: 50% style still would not work, because the nav-buttons are not located correctly in the container hierarchy.

I recorded a short video about the structure of containers and related classes wrapped around the carousel.

Please let me know which class/ ID to add to the CSS to make the buttons appear left and right.

Thanks,
Jan

[David]

You need to make its parent container position relative, add this to my CSS:

.owl-drag {
    position: relative;
}

[Jan]

You made my day, David.

Many, many thanks. At your next visit to the Oktoberfest, the Maß (pine) of beer is on me 😉

Best,
Jan

[David]

Sounds good 🙂 Have one for me!
Glad to be of help

[Jan]

Hi David,

…will do 😉

Meanwhile I was able to style the buttons perfectly well for the tablet and mobile view also.

One more thing. When I have more than one carrousel on the page the CSS causes all prev/next buttons to change there position ;-/

Adding the ID of the parent container (e.g. #leistungsmerkmale), however doesn’t prevent this from happening.

How can I limit position: relative to the relevant ID only?

Thanks,
Jan

[David]

OK, so i thought the owl-drag class was specific to the container you had around the carousel.
In that latest URL that container also includes the content above the carousel.

What we need is a CSS Class that is specific to the container that wraps the carousel.
Looking at that page i see that class is: carousel-wrap

Change the CSS to that class ie>

.carousel-wrap {
    position: relative;
}

[Author]

Posts