The wonderful and popular “Beatiful jQuery Slider” worked great, but I ran into some questions that I, along with many others before me, had to figure out by looking through all the code, much of which is not necessary.

Here is a screenshot of the slider: (pretty nice eh?)

I created a slightly modified version (free, of course) with notes in the code to guide you in different ways.

Some of the features you will find:

1. A cleaned up scripts.js file
2. Easy-to-understand notes in various files to guide in customization.
3. I changed some the css id names, etc for increased integrability for an html or blog page
   (f.e. removing the body css and dispersing necessary attributes to other classes)
4. 2 different folders: 1 for the default slider with notes, the other is ready to integrate into a page.

Big credit and a shout-out goes to Ravindra from dream css for making the original slider. We love it! I just wanted to answer some of the questions in the files and clean it up a bit to make it easier to use for people.

In the notes, I answer questions like:

1. How to change the dimensions of the slider without loosing any functionality i.e. gaps, etc.
2. How to adjust the black navigation bar properly and change its size
3. How to change the delay between transitions
4. How to change the speed of the transitions

And I made it all much easier to understand!

Download Kyle’s Beautiful jQuery Slider

So, If you have any other insight on this, or comments, etc.
Please reply below, because I wanna hear it!