Using glide.js .refresh api

Question

Background:

I am having an issue where I have an instance of a glide.js slide show inside a easytabs.js instance. When the window size changes, the css media queries are not kicking in properly for the glide.js instance. It appears this is happened because easytabs.js is caching the last state of the glide.js instance so when that tab is opened again at a new window size, the glide.js instance is not re-sizing accordingly.

Question:

I am attempting to use the glide.js API function .refresh(), but when I apply it, I get a "TypeError: glide is undefined" message. Here is the code:

   $('#glide').glide({
      type: "carousel", 
      autoheight: "true",
      animationDuration: 600
    });

    var glide = $('#glide').glide().data('api_glide');

    $('.tab-button').click(function(){
      console.log("Button 1 Clicked"); 
      glide.refresh();
    });

Any ideas where I might be going wrong?

score 3 · Answer 1 · answered Nov 30 '15 at 12:29

I just had problems with using the API too, but I got it. To get the API, try this:

var glide_api = $("#glide").data('glide_api');
glide_api.refresh();

You don't need to call glide() between the selector and the data-function to get the API. Also, the name of the api is glide_api, not api_glide.

Using glide.js .refresh api

1 Answers1