Thumbnail url changed but is not reflected until resize ajax - php

Question

Hello I have a image slider with some pictures. With the help of ajax I am changing the image url , the image is working fine. while in the case of thumbail I can see the changes reflected in console but it is not reflected on the webpage until i resize the page.
console.log(url);
$('.img1').attr("src",url+"/RUST_1.jpg");
$('.img2').attr("src",url+"/RUST_2.jpg");
$('.img1thumb').attr("data-thumb",url+"/RUST_1.jpg");
$('.img2thumb').attr("data-thumb",url+"/RUST_2.jpg");
<ul id="image-gallery" class="gallery list-unstyled cS-hidden">
<li class="img1thumb" data-thumb="../images/<?php echo $item[0]->DESIGN; ?>/<?php echo $item[0]->COLOR_CODE;?>/RUST_1.jpg" >
<img class="img1" class="card-img-top" class="img" src="../images/<?php echo $item[0]->DESIGN; ?>/<?php echo $item[0]->COLOR_CODE; ?>/RUST_1.jpg" alt="Card image" style="width:100%" />
</li>
<li class="img2thumb" data-thumb="../images/<?php echo $item[0]->DESIGN; ?>/<?php echo $item[0]->COLOR_CODE; ?>/RUST_2.jpg" >
<img class="img2" class="card-img-top" class="img" src="../images/<?php echo $item[0]->DESIGN; ?>/<?php echo $item[0]->COLOR_CODE; ?>/RUST_2.jpg" alt="Card image" style="width:100%" />
</li>
</ul>
I found this in lightslider.js
var thumb = $children.eq(i * settings.slideMove).attr('data-thumb');
if (settings.gallery === true) {
pagers += '<li style="width:100%;' + property + ':' + thumbWidth + 'px;' + gutter + ':' + settings.thumbMargin + 'px"><img src="' + thumb + '" /></li>';
} else {
pagers += '<li>' + (i + 1) + '</li>';
}
if (settings.mode === 'slide') {
if ((v) >= w - elSize - settings.slideMargin) {
i = i + 1;
var minPgr = 2;
if (settings.autoWidth) {
pagers += '<li>' + (i + 1) + '</li>';
minPgr = 1;
}
if (i < minPgr) {
pagers = null;
$slide.parent().addClass('noPager');
} else {
$slide.parent().removeClass('noPager');
}
break;
}
}
}

Answer 1

Sorry to waste your time, but lightslider provides a public function to refresh the slider
Step 1: get an object of the light slider
slider = $(document).find('#image-gallery').lightSlider({});
Step 2: call refresh function after you change the images url
slider.refresh();
Source: https://github.com/sachinchoolur/lightslider/blob/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/README.md