[Resolved] Integrating Owl carousel into GP Theme

[Fernando]

You’re welcome Jan!

[Jan]

Hi Fernando,

I did make it work ;-). Please check the page link below for the result.

The final step is to move the next-/ prev.-buttons left and right from the items.

First I assigned classes to both buttons in the jQuery (Elements hook):

navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],

Then I uploaded button-icons to the Media Library and then added the relevant CSS:

/* Owl Carousell - Format navigation */

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

  .owl-carousel .nav-btn{
      height: 47px;
      position: absolute;
      width: 26px;
      cursor: pointer;
      top: 100px !important;
  }

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

  .owl-carousel .prev-slide{
      background: url('/wp-content/uploads/2022/06/nav-icon-next.png') no-repeat scroll 0 0;
      left: -33px;
  }
  .owl-carousel .next-slide{
      background: url('/wp-content/uploads/2022/06/nav-icon-prev.png') no-repeat scroll -24px 0px;
      right: -33px;
  }

For some reason the buttons will not jump into place.

Any ideas on what I may be missing?

Thanks,
Jan

PS: This is the tutorial I used to get here.

[Fernando]

Can you try removing the CSS code you added, and I’ll see how it looks like by default?

In this link: http://b3qn4j.myraidbox.de/#carousel, if you add this CSS:

.owl-nav {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.owl-stage-outer {
    width: 90%;
    text-align: center;
}

It will position the nav buttons to the left and right accordingly.

Let us know once you’ve removed the code.

[Jan]

Hi Fernando,

this does help a lot already. Many thanks.

The CSS I ended up using is this:

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

#leistungsmerkmale .owl-nav {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

#leistungsmerkmale .owl-stage-outer {
    width: 90%;
    text-align: center;
}

#leistungsmerkmale .owl-nav.disabled {
    margin-top: 130px;
}

#leistungsmerkmale .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    //width, height
    width:60px;
    height:90px;
}

#leistungsmerkmale .owl-carousel .owl-nav .owl-prev {
    background: url('Form_Pfeil_links.png') no-repeat;
}

#leistungsmerkmale .owl-carousel .owl-nav .owl-next {
	background: url('Form_Pfeil_rechts.png') no-repeat;
}

For some reason, the left and right button icon will no show up.

Any thoughts on what I may be missing?

Thanks,
Jan

[David]

Hi there,

your URL in background: url('Form_Pfeil_rechts.png') no-repeat; need to be the Full Path to the image, not just the filename

[Jan]

Hi David,

I added the Full Path as follows:

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

#leistungsmerkmale .owl-nav {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

#leistungsmerkmale .owl-stage-outer {
    width: 90%;
    text-align: center;
}

#leistungsmerkmale .owl-nav.disabled {
    margin-top: 130px;
}

#leistungsmerkmale .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    //width, height
    width:60px;
    height:90px;
}
#leistungsmerkmale .owl-carousel .owl-nav .owl-prev {
    background: url('https://b3qn4j.myraidbox.de/wp-content/uploads/Form_Pfeil_links.png') no-repeat;
}

#leistungsmerkmale .owl-carousel .owl-nav .owl-next {
    
	background: url('https://b3qn4j.myraidbox.de/wp-content/uploads/Form_Pfeil_rechts.png') no-repeat;
}

The icons are still no showing ;-(

This is the PHP that I added to the hook:

<script> 
	jQuery(document).ready(function() {   
  jQuery('#leistungsmerkmale').owlCarousel({
		dots: false,
		autoWidth: false,
		center: false,
		stagePadding: 40,
    margin: 48,
		autoplay: true,
		autoplayTimeout: 5000,
		autoplayHoverPause: false,
		responsiveClass:true,
		nav: true,
		responsive:{
        0:{
            items:1.1,
        },
        600:{
            items:1.1,
        },
        1000:{
            items:1.6,
        }
    }
  })
})
	
</script>

Any idea as to what I am missing?

Best,
Jan

[David]

It is there, you would need to resize the button ie. make it wider, and set the background-size to make the image visible.

Alternatively, use the owlCarousel API – theres a navText argument for that function:

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

And see the version 2 code here on how to use that:

https://stackoverflow.com/a/31224798

[Jan]

Hi David,

Thanks for getting back. Sounds like I’m on the right track 😉

I’ll take a look into the alternative option and then let you know how it goes.

Best,
Jan

[David]

Glad we could be of help

[Jan]

Hi David,

meanwhile, I went through the complete guide once again to find out why the custom navigation icons would not show left and right from the owl2 carousel.

Following your advice, I added the navText argument to the JS function in the Elements Hook:

<script> 
	jQuery(document).ready(function() {   
  jQuery('#leistungsmerkmale').owlCarousel({
		dots: false,
		autoWidth: false,
		center: false,
		stagePadding: 40,
    margin: 48,
		autoplay: true,
		autoplayTimeout: 5000,
		autoplayHoverPause: false,
		responsiveClass:true,
		nav: true,
		navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
		responsive:{
        0:{
            items:1.1,
        },
        600:{
            items:1.1,
        },
        1000:{
            items:1.6,
        }
    }
  })
})
	
</script>

I also compared each line of the CSS in the customizer:

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

#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{
      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;
  }

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

Finally, I used the Chrome debugger to compared my version of the carousel to the demo version that came with the guide. All IDs and Classes seem correctly assigned to the relevant GP Container.

The custom navigation icons are not moving to the left and right of the carousel ;-/

What is the best way for us to finally tackle this? I’m more than happy to set up an admin-user for you to access the system.

Any advice is much appreciated.

Best,
Jan

[Jan]

Hi David,

Do you get a chance to look into this any time soon?

I need to deliver the live version of the site this weekend ;-/

Please let me know.

Many thanks,
Jan

[Fernando]

Hi Jan,

Sorry, David’s on leave right now. He’ll be back likely next week.

Javascript is also out of our scope of support. See here to know what our support includes: https://generatepress.com/what-support-includes/

For now, it might be best to reach out to a developer for assistance.

Hope you understand.

[David]

so as the navText option supports HTML, then your simplest route maybe to include the Image in that HTML 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]

Great idea, David. This could really simplify things.

I added the navText option to the Elements Hook and adjusted the URL to the icon files.

The // inside the full URL make the option appear in a strange color (like commentary in PHP or CSS – /* */)

Am I missing anything?

[David]

What happens on the front end ?

[Author]

Posts