[Resolved] insert glider.min.Js & glider.min.CSS in child theme

Home Forums Support [Resolved] insert glider.min.Js & glider.min.CSS in child theme

Home Forums Support insert glider.min.Js & glider.min.CSS in child theme

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1604655
    melvin wang

    Hi,

    I would like to insert Glider (glider.min.css & glider.min.js) to my child theme.

    Just want to check with you is it correct to open the folder path as below?
    ChildTheme> Asset > CSS > glider.min.css
    ChildTheme> Asset > JS > glider.min.js

    My objective eventually is to make a glider in the site.

    Or do you have any better suggestion to insert those CSS and JS?

    TQ

    Melvin

    #1604695
    David
    Staff
    Customer Support

    Hi there,

    you can use those paths if you wish – you just need to ensure that any links or if you enqueue those styles / scripts that those paths are specified.

    More info on enqueue:

    https://developer.wordpress.org/reference/functions/wp_enqueue_script/
    https://developer.wordpress.org/reference/functions/wp_enqueue_style/

    #1607424
    melvin wang

    Hi David,

    Thanks for your supportive reply. I’m trying to make a glider test but not succesful yet. Been trying to search google and use different ways but still fail. Thus I hope you could kind enough to see what’s wrong with my steps and code. This is what i’ve done:

    Step 1. Insert glider JS and CSS to Child theme folders
    CSS: Generatepress-Child> css > glider.css (and also) glider.min.css
    JS: Generatepress-child> js > glider.js (and also) glider.min.css

    Step 2. Enqueue Script and Style in my child theme Function.php

    function generatepress_child_enqueue_scripts() {
    	if ( is_rtl() ) {
    		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
    	}; //this code is already here when theme libary installed
    	wp_enqueue_style('glider_style', get_theme_file_uri('assets/css/glider.css')); //enqueue glider CSS
    	wp_enqueue_script('glider_script', get_theme_file_uri('assets/js/glider.js'), array(), '1.0', true); //enqueue glider js
    }
    add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );

    Step 3: Initialize Glider.js by using GP Hook Element to wp_footer of entire site

    <script>
    new Glider(document.querySelector(".glider"), {
      slidesToShow: 1.5,
      slidesToScroll: 1,
      draggable: true,
      responsive: [
        {
          // If Screen Size More than 768px
          breakpoint: 768,
          settings: {
            slidesToShow: 1.5,
            slidesToScroll: 1,
            duration: 0.5,
            arrows: {
              prev: ".glider-prev",
              next: ".glider-next"
            }
          }
        },
        {
          // If Screen Size More than 1024px
          breakpoint: 1024,
          settings: {
            slidesToShow: 2.2,
            slidesToScroll: 1,
            duration: 0.5,
            arrows: {
              prev: ".glider-prev",
              next: ".glider-next"
            }
          }
        }
      ]
    });
    </script>

    Step 4: Test create glider on this test page, but the glider seems doesn’t work.

    Could you please help to check where is wrong with it?

    Thanks David.

    Regards,
    Melvin

    #1607494
    Elvin
    Staff
    Customer Support

    Hi,

    I see you’re using autoptimize to aggregate the JS scripts.

    JS aggregation is known to cause issues.

    That said, can you try disabling autoptimize and see if it works?

    Let us know.

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

    #1607506
    melvin wang

    Hi,

    I deactivated the plugin. It is not working still the slider.

    Can you please check if my steps or code wrong anywhere

    Thanks

    #1607528
    Elvin
    Staff
    Customer Support

    I’ve checked the manual here:
    https://nickpiscitelli.github.io/Glider.js/

    I’ve also checked your site and you have this error on the console:

    (index):904 Uncaught ReferenceError: Glider is not defined

    What this means is that your script on step 3 runs before the glider.js library is loaded.

    That said, I’d change the priority of the hook element where it is placed to 9999 to be sure it runs last.

    I’ve actually tested this on my sandbox site as well and it doesn’t seem to have any issues.
    DEMO PAGE

    Reminder: Applying third party script libraries are out of our scope. If the libraries enqueued are bugged, I’m afraid we can’t help you with it.

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

    #1607651
    melvin wang

    Hi,

    Thanks for your reply. I’ve change the priority of the hook element where it is placed to 9999. However the glider is still not working still.

    Probably it’s in my step 2 which i enqueued it wrongly?

    Can you please see see and assist me?

    p/s: im currently using a childtheme

    TQ

    Melvin

    #1607659
    Elvin
    Staff
    Customer Support

    Thanks for your reply. I’ve change the priority of the hook element where it is placed to 9999. However the glider is still not working still.

    I’ve checked your site and the library is actually running.

    The problem now is that your HTML structure isn’t well suited for the script.

    There are too many nested containers and it confuses the script.

    Your structure should be:

    1 Grid Block with the class “glider” and then add in all the columns that will serve as the slide items.

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

    #1607711
    melvin wang

    Hi Support,

    Thanks you are really bravo! that glider is now working nicely.

    The one thing left to fix is the arrows. This is how the HTML structure is

    <div class = glider-contain>
     <grid class = glider>
       Slider items here
     </grid>
     <html>
     <button aria-label="Previous" class="glider-prev">«</button>
     <button aria-label="Next" class="glider-next">»</button>
     <div role="tablist" class="dots"></div>
     </html>
     </div>

    View post on imgur.com

    However the glider arrow left and right doesn’t appear. Can you help to check where’s wrong about code?

    Thank you

    #1608004
    David
    Staff
    Customer Support

    The next / previous buttons are being absolutely positioned off screen.
    Few changes:

    1. Update this CSS to include the position: relative; now the absolutely positioned buttons will be relative to this container.

    .glider-contain {
        width: 100%;
        margin: 0 auto;
        position: relative;
    }

    2. Update this code and change the abs position values to a positive value – see comments below:

    .glider-prev, .glider-next {
        user-select: none;
        position: absolute;
        outline: none;
        background: none;
        padding: 0;
        z-index: 2;
        font-size: 40px;
        text-decoration: none;
        left: -23px; /* change the property to a positive value */
        border: 0;
        top: 30%;
        cursor: pointer;
        color: #666;
        opacity: 1;
        line-height: 1;
        transition: opacity .5s cubic-bezier(.17,.67,.83,.67),
    color .5s cubic-bezier(.17,.67,.83,.67);
    }
    
    .glider-next {
        right: -23px; /* change the property to a positive value */
        left: auto;
    }
    #1608819
    melvin wang

    Hi David,

    Thanks for your help, I really appreciate it

    TQ

    Melvin

    #1609047
    David
    Staff
    Customer Support

    Glad we could be of help

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