Draggable image slider - php

Question

I'm relatively new to the world of programming and this is my first question on stack overflow. I have to create a system written in php and jquery that allows to order a series of images and, based on the order, create a banner-style animation. The only problem is that when the script selects the images from the div to create the animation they disappear. thanks in advance for your collaboration
the javascript
$(document).ready(function () {
const images = document.querySelectorAll('.imgw');
$('#preview').html(images[0]);
$("#genera").click(function () {
setInterval(banner, 2500);
var index = 1;
});
});
const banner = () => $('#preview').fadeOut('slow', function () {
$(this).html(images[index]);
$(this).fadeIn('slow', function () {
if (index == images.length - 1) {
index = 0;
} else {
index++;
}
});
})
the html file
<section>
<div class="row" style="margin-top:25px;">
<div class="col text-center">
<h2 style="margin-top:25px;">Anteprima</h2>
<div id="preview">
</div>
</div>
</div>
</section>
<section>
<div class="row" id="slides" style="margin-top:25px;">
<div class="col text-center">
<!-- <div id="box"> -->
<h2 style="margin-top:25px;">Slides</h2>
<ul id="sortable">
<?php
$html = "";
$count = 1;
foreach ($images as $img) {
$url = $img["url"];
$size = $img["size"];
$humanSize = $img["human_size"];
$html .= "\t\t<img src='{$url}' class='imgw' id='{$count}' alt='image_{$count}' />\n";
$count++;
}
echo $html;
?>
</ul>
</div>

Answer 1

I read the documentation better and solved the problem
the javascript
var images = $('.ui-sortable').children("img").clone();
var index = 1;
const banner = () => $('#anteprima').fadeOut('slow', function () {
$(this).html(images[index]);
$(this).fadeIn('slow', function () {
if (index == images.length - 1) {
index = 0;
} else {
index++;
}
});
})
setInterval(banner, 2500);