<!-- the relevant markup: -->
<div class="gallery-wrapper">
    <ul class="gallery-slides" style="border: 2px dotted red;">
    </ul><!-- END .gallery-slides -->
</div><!-- END .gallery-wrapper -->


<!-- ALL IMAGES LOAD & DISPLAY; GENERATED SLICK MARKUP APPEARS CORRECT -->
<script src="assets/js/slick.min.js"></script>
<script type="text/javascript">

    loadImages(initSlick);

    function loadImages(callback) {

        $.getJSON( "assets/js/gallery_images.json", function(data) {
            var slides = []; // <li> els

            $.each(data, function(ix, obj) {
                slides.push(
                    // "<li class='slick-slide'>" +
                    "<li>" +
                        "<div class='slide-img'>" +
                            "<img src='assets/images/gallery/" + obj.imgUrl + "' alt='" + obj.imgAlt + "' />" +
                        "</div>" +
                        "<div class='slide-info-bg'></div>" +
                        "<div class='slide-info-wrapper'>" +
                            "<div class='slide-info project-info'>" +
                                "<h2 class='project-community'>" + obj.projectCommunity + "</h2>" +
                                "<h3 class='project-name'>" + obj.projectName + "</h3>" +
                                "<p class='project-description'>" + obj.projectDescription + "</p>" +
                            "</div><!-- END .slide-info -->" +
                        "</div><!-- END .slide-info-wrapper -->" +
                    "</li>"
                ); // END items.push
            }); // $.each ...

            slides = slides.join("");
            var gallery = document.querySelector(".gallery-slides"); // ul
            gallery.innerHTML += slides;
        }); // END $.getJSON
        callback();
    } // END loadImages

    function initSlick() {
        $('.gallery-wrapper').slick({ // DNU the ul
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3,
            dots: true,
            // responsive: [ snip ]
        });
    } // END initSlick

</script>





<!-- ALL IMAGES LOAD & DISPLAY; GENERATED SLICK MARKUP APPEARS CORRECT -->

<script src="assets/js/slick.min.js"></script>
<script type="text/javascript">

    async function loadImages() {
        let data = $.getJSON("assets/js/gallery_images.json");
        return data;
    } // END loadImages

    loadImages().then(function(data) {
        var slides = [];

        $.each(data, function(ix, obj) {
            slides.push(
                "<li>" +
                    "<div class='slide-img'>" +
                        "<img src='assets/images/gallery/" + obj.imgUrl + "' alt='" + obj.imgAlt + "' />" +
                    "</div>" +
                    "<div class='slide-info-bg'></div>" +
                    "<div class='slide-info-wrapper'>" +
                        "<div class='slide-info project-info'>" +
                            "<h2 class='project-community'>" + obj.projectCommunity + "</h2>" +
                            "<h3 class='project-name'>" + obj.projectName + "</h3>" +
                            "<p class='project-description'>" + obj.projectDescription + "</p>" +
                        "</div><!-- END .slide-info -->" +
                    "</div><!-- END .slide-info-wrapper -->" +
                "</li>"
            ); // END items.push
        }); // $.each ...

        slides = slides.join("");
        const gallery = document.querySelector(".gallery-slides");
        gallery.innerHTML += slides;
    });

</script>


<script type="text/javascript">
    $('.gallery-slides').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        dots: true,
        // responsive: ... [ snip ]
    });