Glide: Dynamically created slides

[rihok]

The slider doesn't seem to initialize properly when the slides are created dynamically with jquery beforehand.

Any ideas?

[rihok]

And by not working properly, I mean it doesn't create the navigation components or set the slide widths properly, but it does seem to add some width values to the wrapper and slider div.

[jedrzejchalubek]

You need to .reinit() slider to recalculate and rebuild after adding.

[rihok]

That doesn't work either. Here's the code I'm using. Maybe I'm doing something wrong.

var glide = $('.slider').glide({
    autoplay: false,
    arrows: '.slider',
    navigation: '.slider'
}).data('api_glide');

function buildSlides(page) {
    sliderContainer = $(".slider__wrapper");
    var url = "data/"+page+".json";
    $.getJSON(url, function(data) {
        $.each(data.slideurls, function(){
            $(sliderContainer).append('<li class="slider__item"><img src="'+this.url+'" /></li>');
            console.log(this)
        });
    });
    glide.reinit();
}

[jedrzejchalubek]

You're using async ajax call. Code run before all request take place. Reinit slider inside ajax success callback.

[rihok]

Ah, perfect. Thank you. That worked fine.

[idesigns-studio]

Hello! I am having the same problem. When the window resizes, the width is adjusted to the correct fashion, but on load, it stacks up to the left. Since i don't really understand Javascript, could you give me the code for forcing a recalculation? I tried glide.reinit(); in many ways in my default start code, but it just duplicates the content.

[chrischen]

There doesn't seem to be a reinit method anymore. What's the correct way to reinit now?

[vcastro45]

@chrischen Did you find the solution ?

[kylerberry]

For those interested, it's not the most efficient way to resolve this but works for me.

I tried .mount() which fixes the new slide width, but it doesn't update the navigation as OP mentioned.

Now, I fully destroy the instance and mount a new one anytime slides are added / removed.

// ...on add slide
myGlider.destroy()
myGlider = new Glide(rootEl)