The final image in glide.js is not visible when image sources are set through jQuery

Question

When creating slides for a glide carousel and I assign the sources in the HTML, the carousel works as intended.

<div class="slide"><li class="glide__slide"><img src="images/resized/16.jpg" id="img1"></li></div>
<div class="slide"><li class="glide__slide"><img src="images/resized/18.jpg" id="img2"></li></div>
<div class="slide"><li class="glide__slide"><img src="images/resized/30.jpg" id="img3"></li></div>

However when I try and change the sources through jQuery the first two images appear as intended but the last image does not appear. Rather it shows as a blank image in the carousel.

var vImg1 = "images/resized/16.jpg";
var vImg2 = "images/resized/18.jpg";
var vImg3 = "images/resized/30.jpg";

$("#img1").attr("src", vImg1);
$("#img2").attr("src", vImg2);
$("#img3").attr("src", vImg3);

I have tried this same scenario with 4 images too, and in that case the third image will appear but the 4th does not appear.

Answer 1

The solution that ended up working for me was to use

glide.destroy()

before the images are changed, and then mount the glide again after the images are changed.