Super. Simple. Slider.

AN INTELLIGENT PLUGIN

This one's got a title.

Just text in this one

Oh, and the slide has a background image thanks to a little bit of CSS.

Super Mamika by Sasha Goldberger

Ok yes, there are a lot of sliders out there. But while many of them are great, they're also usually bloated with features that you don't need. That's why we thought we'd take things back to basics. Functional, flexible and weighing in at less than a single kilobyte, Intelligent Themes proudly presents - Super Simple Slider.

Basic Usage.

As you might expect, Super Simple Slider (SSS) is super simple to set up. Just create an element, and put your content inside. If your content is of different heights, SSS will animate smoothly to accommodate it.


<div class="slider">
<img src="images/image1.jpg" />
<img src="images/image2.jpg" />
<div class="just_text">This one's just text.</div>
<img src="images/image3.jpg" />
<div><img src="images/image4.jpg" /><span class="caption">This one has a caption</span></div>
</div>

Next, upload the SSS folder to your server, include jQuery, the sss.js file and the sss.css file in the head of your page and, of course, call the function:


<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="sss/sss.min.js"></script>
<link rel="stylesheet" href="sss/sss.css" type="text/css" media="all">

<script>
jQuery(function($) {
$('.slider').sss();
});
</script>
</head>

Options.

Super Simple Slider includes the following options for your content sliding needs. Just include the ones you want to change.


$('.slider').sss({
slideShow : true, // Set to false to prevent SSS from automatically animating.
startingSlide : 0, // Slide to display first. Uses array notation (0 = first slide).
speed : 3500, // Slideshow speed in milliseconds.
showNav : true // Set to false to hide navigation arrows.
});

Features.
Super Simple. Super Small.

The minified version of Super Simple Slider is a mere 992 bytes, making it perfect for mobile websites, image heavy portfolios, or any project where you need to watch your website's weight.

Arrow key support.

Do you have a keyboard in front of you right now? Why point and click like a sucker when SSS lets you navigate using your left and right arrow keys? Leave your keyboard-less friends green with envy!

Works with any HTML content.

You'd be forgiven for presuming that a slider this simple only worked with images, but you'd be wrong. Video, audio, HTML, SSS does it all.

Browser friendly.

SSS has been tested in the latest versions of Chrome, Safari, Firefox, Opera, and Internet Explorer versions 7+.

If you're using Internet Explorer 6 or lower you're probably used to the internet not working..

Responsively designed.

Naturally, you'll want your slider to play nicely with your shiny new responsive website. No problem. Just set up the width(s) of your slider in your stylesheet and SSS will handle the rest.

Released under the WTFPL license.

Intelligent plugins are our way of giving back to the community and are released under the most liberal license we could find. Feel free to use, modify and exploit SSS in personal or commercial projects.

FAQ.
Q. Super Simple Slider doesn't include feature X, Y or indeed Z. When can I expect you to add them?

A. Although this was just kind of a fun project for us, we do plan to add features and squash any bugs that may be discovered. However, for completely arbitrary reasons, we're determined to keep the minified file size below 1kb, so some things won't be possible..

Q. Aargh, I'm completely stuck! Please will you help me?

A. Sure! Hit us up on Twitter or email us at info@intelligentthemes.com and we'll get back to you as soon as we can.