Slick slider doesn't show images in bolt cms - bolt-cms

Question

What I am trying to do is load all the files(images) from the directory and append every image on the slick slider. I initialize the slider on document ready in js file and after initialization I call the function addImagestoSlider(). This works when I test the site locally(the images are displayed), but when I convert it to bolt cms the images doesn't show in the slider. I can see the images in the inspect element, but they are not displaying.
The javascript function:
function addImagesToSlider() {
console.log("in addImagesToSlider");
var dirCars = "http://localhost/bolt/public/bolt/files/files/Cars";
const fileextension = ".jpg";
$.ajax({
//This will retrieve the contents of the folder if the folder is configured as 'browsable'
url: dirCars,
success: function success(data) {
//List all .jpg file names in the page
$(data).find("a:contains(" + fileextension + ")").each(function() {
let filename = this.href.replace(window.location.host, "").replace("http://", "");
console.log("filename: " + filename);
$('#cars_slider .slide-tracker').append(`
<figure>
<img src="${filename}"
</figure>
`);
});
}
});
}

Answer 1

This doesn't seems like a Bolt related issue. But just to be sure, try to check your dirCars route in the server.

Answer 2

After carefully reading the Bolt documentation I solved this in a completely different way. In the .twig file I loaded the images from the directory into the slider directly this way:
<div class="slider" id="cars_slider">
{% for image in record.gallery %}
<figure>
<img data-lazy="{{ thumbnail(image, 0, 0) }}">
</figure>
{% endfor %}
</div>