Create a Image Slider that reads images from a specific Folder - Dynamically

Hello all, after some search to one of my job, I found a way to create a slider image from a folder.

And I like to share with you…

1st - Add a Structure 1 column:


2nd - Add a DIV bric:


3rd - Give that DIV the following class: directoryslider:


4rd - Open Page Settings:


5th - In Code Tab under Header Option add the following code:

<script src="//"></script>
<script src="./js/directorySlider.js"></script>

6th - Under Footer Option add the following code:

document.addEventListener("DOMContentLoaded", function() {

7th - In Page Settings under “Page File Attachment” add the following file: (1.3 KB)

8th - Create a folder named slideimage in your computer

9th - Inside that folder add all the images you want but respecting the following name: slide_1.jpg slide_2.jpg etc, etc

10th - Open Project Settings NOT PAGE SETTINGS:


11th - In Project Attachments Tab, grab the folder created in 8th step and drag it directly to the placeholder files space as you can see in the picture above, and you will get a folder with all files directly in Blocs and it will be exported respecting this, not merging the images in img folder:

And that’s it…

You can see the sample demo that I create for you all in here.

I had used the js from Justin W. Hall, and you can find some information to edit and customize the js in here.

Hope is helpful for you…


Nice @Pealco .

I’m assuming this is using Ajax to get the files? Be cool to have this without a jquery dependency.

1 Like

Isn’t THAT cool as hell!!

Thank you for sharing…


1 Like