[Resolved] css js html integration

[Matthieu]

Hello, I have a problem with the display of my testimonial slider. I have added the HTML in the “Custom Html” block of my page. The css in the css customizer and the js in a wp_footer hook surrounded by <script $ </script$> tags.

The display is there but there is an error, the rendering should be like this: https://codepen.io/gatoledo1/pen/MWKpLNY

I used the exact same code as on the link above.

Thank you in advance for your answers.

[Matthieu]

Sorry, here is the site in question: You have to go down to “testimonials”

https://www.mmgraphik.com/

[David]

Hi there,

theres a jQuery error in the site. First disable Autoptimize to see if thats causing a problem with script.

[Matthieu]

Hello, thank you for your answer. By disabling Autoptimize I don’t feel that this fixes the problem.

[David]

Nope – but it allows me to see whats missing… i can’t see the OwlCarousel script being loaded – did you add it to your site?

If you go to the CodePen and click the Cog beside the JS window it will show the settings, which includes the CDN link to scripts it requires ( you don’t need the jQuery )

[Matthieu]

Indeed I see cdn when I click there where you indicated to me:

https://code.jquery.com/jquery-2.2.4.min.js

https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js

How do I go about getting the right result? Thank you very much for taking the time to help me solve this problem

[David]

First you need to get the owl.carousel script loaded.

To do this:

1. Create a new Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

2. Add this to the hook content:

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

3. Select the wp_head hook

4. Set the Display Rules to the pages/posts where you are using the carousel.

[Matthieu]

Thank you for your response and for your time. I test to do what you told me, the result is not the same as on the codepen. However I put the HTML in a block, the css in the customizer as well as your guide for the integration of the script.

Did I forget something? The code found on codepen may not be usable on generatepress?

Thanks 😁

[Matthieu]

Currently I add that the part you gave me: <src script = “https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js”&gt; < / script>

Should I also add the js part on codepen?
(function () {
“use strict”;

var carousels = function () {
$ (“. owl-carousel1”). owlCarousel ({
loop: true,
center: true,
margin: 0,
responsiveClass: true,
nav: false,
responsive: {
0: {
items: 1,
nav: false
},
680: {
items: 2,
nav: false,
loop: false
},
1000: {
items: 3,
nav: true
}
}
});
};

(function ($) {
carousels ();
}) (jQuery);
}) ();

Thanks

[Elvin]

Hi there,

You should definitely add if you’ve yet to.

Hooking this – <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> – only allows the use of owl carousel script library on your site (or page where it was added).

To actually be able to make owl carousel run and/or control what it does, you have to add that because that’s the initialization script.

[Matthieu]

Hello, I did add the part you mentioned, should I add the js part provided on the codepen as well?

Thanks

[Elvin]

Hello, I did add the part you mentioned, should I add the js part provided on the codepen as well?

Yes, you definitely have to as mentioned on the previous reply. That’s actually the init script that runs the library.

You’re basically just hooking the library if you don’t add the init script.

[Matthieu]

Despite the addition of the js it still does not work

[Elvin]

Refer to this for proper installation and usage.
https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html

Pay close attention to which scripts are to be hooked.

Some have to be hooked on wp_head while others on wp_footer.

[Matthieu]

Really too complex this story 😅 Thanks for your help !

[Author]

Posts