[Resolved] css js html integration

Home Forums Support [Resolved] css js html integration

Home Forums Support css js html integration

Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #1670845
    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.

    #1670846
    Matthieu

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

    https://www.mmgraphik.com/

    #1670887
    David
    Staff
    Customer Support

    Hi there,

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

    #1670889
    Matthieu

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

    #1670912
    David
    Staff
    Customer Support

    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 )

    #1670926
    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

    #1671155
    David
    Staff
    Customer Support

    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.

    #1671186
    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 ๐Ÿ˜

    #1671193
    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

    #1671358
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1671361
    Matthieu

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

    Thanks

    #1671417
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1671438
    Matthieu

    Despite the addition of the js it still does not work

    #1671443
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1671444
    Matthieu

    Really too complex this story ๐Ÿ˜… Thanks for your help !

Viewing 15 posts - 1 through 15 (of 25 total)
  • You must be logged in to reply to this topic.