Slider is a great UI element if you have limited real estate on your website. It's a good way to fit content without making the home page feel too big or cluttered. If you randomised your slide, you can make a page feel fresher because it's different every time users visit your page. You will bring a good impression that your company is an active player!

Besides that, many people use slider to tell story. It's visually engaging if you design the slider properly with attractive images and engaging text copy to encourage user to for the next slide until the end. This is a great tool to present your products or services.

So, how do we build it easily? We have a great tool to introduce - Slider Maker. Implied by its name, Slider Maker is a photo slideshow maker, you do not have to code the slider yourself, it comes with an admin tool where you can customize all sort of settings and animations easily with its intuitive user interface.

Slider Maker UI

Slider Maker's admin is powered by PHP, you need to ensure your local server can parse PHP script. If you don't have it, use MAMP for quick installation. Slider Maker package is bundled with documentation, examples and admin. Here's how the admin looks like:

On the sidebar, there is a list of example sliders, and that's where your new slider will appear. A toolbar with all the control for slider creation.

Underneath it, you will have all the slides within a slider. Here's where you can create all sort of animations. You can reorder the slide easily by drag-and-drop. Click on Edit button to edit the slide.

Animate Layers Within A Slide

Clicking on any of the slide would trigger a modal window, here's where you can add layers to a slide. In order to make your animation precisely, it has a timeline view (just like Flash) so you have an overview of all the animations and adjust it accordingly.

Each layer has an extensive options to create your desired animation. You can edit the content, layout/display and animation. There's enough control to micro manage each layer to animate precisely. This is particularity useful when CSS3 isn't your strength.

Preview & Export

You can preview your slider on Preview Tab, just one click, you will see a slider generated based on your settings.

To export your slider for implementation, click on Publish. Instantly, you will get all the HTML, just make sure you have all the Slider Maker assets in the right path. It's very easy and straight forward. The generated slider is a jQuery slider, so if you already have jQuery in your website, don't forget to remove the existing one in the generated code.

Get Slider Maker

If you weren't familiar with HTML, CSS and JS, no doubt about it, Slider Maker can help you to create sophisticated image slider easily with its intuitive visual user interface.

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.