DRYing out a basic image slider
Put it in a separate function, and call it whenever you want to change it.
I'm not a fan of using an application-scope variable to store the currently selected frame. You could use something like listItems.index(listItems.filter(":visible")) to get the index of the currently selected frame. However, if you want to keep using your way, then please name it something better.


I made a few changes. Of note:


I set display: none on #slider li instead of using listItems.not(':first').hide(). This is because when I loaded it the first time, all the images were briefly shown. This will prevent them from being rendered initially.
I changed the interval into a timeout that's refreshed upon changing frames. This way, if I click on a dot 4.5 seconds after the frame changes, the slider won't change my frame after just 0.5 seconds.


Here's a fiddle.



I made a few more changes in an updated version. Specifically:


By convention, constants are named in uppercase.
By convention, jQuery variables are prefixed with $.
I got rid of the selectedFrame variable and replaced it with a getSelectedIndex() function.
I made the dots dynamically added.


Here's a fiddle.