[Resolved] css js html integration

[Elvin]

I’ll try to simplify.

Hook this to wp_head:

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">

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

You then add this to the wp_footer as well.

<script>
$(document).ready(function() {
    $(".owl-carousel1"). owlCarousel({
        loop: true,
        center: true,
        margin: 0,
        responsiveClass: true,
        nav: false,
        responsive: {
            0: {
                items: 1,
                nav: false
            },
            768: {
                items: 2,
                nav: false,
                loop: false
            },
            1025: {
                items: 3,
                nav: true
            }
        }
    });
});
</script>

If the init script still won’t work, change all $ characters to jQuery. Example: From $(document) to jQuery(document)

[Matthieu]

Hello thank you for your help! Okay, I’m really having trouble understanding the integration. I have added the elements as you indicated. It still doesn’t work … I changed the $ to JQuery but it didn’t work either. Is it possible that the codes found on Codepen.io are not suitable for Generatepress / WordPress?

Thank you for the time you give me

[Elvin]

Is it possible that the codes found on Codepen.io are not suitable for Generatepress / WordPress?

It should work. It’s possible that we’re justing missing things like syntaxes or empty spaces that makes the code malfunction. Or the class indicated doesn’t match.

In fact, I just spotted one.

On $(".owl-carousel1"). owlCarousel({, the . and owlCarousell has space in between. It’s possible that the space inbetween breaks the init script.

[Matthieu]

Hello, unfortunately by adjusting the space between the. and owlCarousell it hasn’t changed anything .. I think I’ll drop the integration of this kind of thing, I don’t know enough about it yet …

[Elvin]

You can try another library and see if others are easier to implement. 😀

This has been done before by other users but I can’t exactly remember what “slider” library they used. This is definitely possible.

[Matthieu]

Yes I will see that thank you very much! Last question: For all that is hamburger menu / side panel animation effects the integration also happens in the wp_footer and the wp_head ?

Thanks 😃

[Elvin]

It really depends on what the library instructs you to do on its installation guide.

But in general, it’s good practice for the JS scripts to be hooked to the footer as it usually needs the whole DOM content to be loaded for it to run properly.

The CSS part of the library is usually placed on the wp_head so it loads immediately to prevent CLS.

[Matthieu]

Ah the css is usually in the wp_head part .. It’s good to know thank you, I put it in custom> additional css.

Thank you for your time! I will train myself more in the integration in php and js before I get into it … 😅
Thanks

[Elvin]

No problem. Best of luck to you in learning things. 🙂

More tip: Add jQuery to the list as pure vanilla JavaScript may not be enough.

[Matthieu]

It’s noted, thank you so much !

[Author]

Posts