Could someone please assist me with aligning my image upload preview in a row, similar to a brand/partners slider? The current preview output is not displaying as desired. Here is the code I have:
<div class="image-gallery">
<div class="row">
<div class="col-md-3">
<ul class="cvf_uploaded_files">
<li>
<div class="user-img">
<input type="file" id="files" name="files[]" multiple />
<div>
<input type="file" name="upload" multiple="multiple" class="user_picked_files" />
<div class="green-btn-outline mx-auto mb-1"><i class="fas fa-plus"></i>
</div>
<div class="green-text small">Add Photo</div>
</div>
</div>
</li>
</ul>
</div>
<div class="col" style="overflow: auto;">
<ul class="ipl cvf_uploaded_files">
</ul>
</div>
</div>
var files = this.files;
var i = 0;
for (i = 0; i < files.length; i++) {
var readImg = new FileReader();
var file = files[i];
if (file.type.match('image.*')) {
storedFiles.push(file);
readImg.onload = (function(file) {
return function(e) {
$('.ipl').append(
"<li file = '" + file.name + "'>" +
"<img class = 'img-thumb' src = '" + e.target.result + "' />" +
"<a href = '#' class = 'cvf_delete_image' title = 'Cancel'><i class='fas fa-times cross'><i/></a>" +
"</li>"
);
};
})(file);
readImg.readAsDataURL(file);