Directory jQuery Slider

Loads all images in a specified directory and creates a slide show

Current Version: 0.9

Github Page:


I occasionally work on an application that is, for all intent and purposes, a CMS. This application and its subsequent ‘sites’ all use the same exact markup. There is some flexibility with some custom fields, but for reasons not relavant to this post, I wanted a jQuery slide show that:

1) Adds all images from a specified directory.
2) Could be called like so $(‘class-or-id’).directorySlider({object:options});

And thus, the Directory Slider was born…

How to use?

Step 1: Link required files

<!– jQuery library (served from Google) –>
<script src="//"></script>
<!– directorySlider Javascript file –>
<script src="/js/directorySlider.js"></script>

Step 2: Create HTML markup

<div class="directorySlider"></div>

Step 3: Call Directory Slider


Configuration Options

animation Type of Animation.

default: 'fade'
options: 'fade', 'uncover'

filebase Type base of all files in you directoy. Ex: for files slide_01.jpg, slide_02.jpg and slide_03.jpg the filebase would be ‘slide_’ and for img_01.png, img_02.png and img_03.png the filebase would be ‘img_’.

default: 'slide_'
options: string

extension The file extension of the files you are using.

default: 'jpg'
options: any image format (string)

directory The directory of your slides.

default: null
options: '/path/to/slides/folder'

numslides Number of slides in directory.

default: null
options: integer

Optional Options

speed Slide transition speed in milliseconds.

default: 1000
options: integer

timeout Time between slides.

default: 4000
options: integer

height Height of your slideshow in pixels.

default: null
options: integer

width Width of your slideshow in pixels.

default: null
options: integer


If you are seeking support or have any question at all in regards to this script, please provide a LIVE URL otherwise there is just no way to provide helpful feedback. Support questions here via email or on github without a live URL will be ignored. Sorry.

Posting code? Do it like this:

⟨pre⟩⟨code⟩ var foo = 'bar'; ⟨/code⟩⟨/pre⟩