Slick slider doesn't show images in 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>
            `);
        });
    }
 });
}

score 0 · Answer 1 · answered Sep 28 '17 at 21:11

0

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

answered Sep 28 '17 at 21:11

zomars

317
1
7

score 0 · Answer 2 · answered Sep 29 '17 at 14:12

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>

Slick slider doesn't show images in bolt cms

2 Answers2