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

[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

[David]

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/

[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

[Elvin]

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.

[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

[Elvin]

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.

[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

[Elvin]

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.

[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

[David]

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;
}

[melvin wang]

Hi David,

Thanks for your help, I really appreciate it

TQ

Melvin

[David]

Glad we could be of help

[Author]

Posts