css js html integration

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

https://www.mmgraphik.com/

Hi there,

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

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

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 )

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

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.

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 😁

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"> < / 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

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.

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

Thanks

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.

Despite the addition of the js it still does not work

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.

Really too complex this story 😅 Thanks for your help !