welcome to the new, easy way of sliding

In a lot of projects we were in need of a slider but there are always very different requirements. Of course we thought about buying one of those function-packed sliders which took us too much time to set up and in the end we weren't 100% happy with the result, too often we missed the simplicity in it.
At this time SuperSimpleSlider was born...we thought about a hand full of features which are kind of a "must have", after that it was really important to keep the requirements and the workload for the setup at a minimum. In the end, we came up with a script which automatically generates your slider and gives you a balanced amount of settings to configure. This new, stylish and flexible way of integrating sliders in your webpage will speed up your workflow without losing quality in design.

how to install

Download the SuperSimpleSlider.min.js to your system and import it into your project:
<script src="js/SuperSimpleSlider.min.js"></script>
make sure you have imported jQuery, for example hosted by Google, before you import the SuperSimpleSlider.min.js. If you want to enable touch you need both, jQuery and jQuery mobile:
<script src=""></script>
<script src=""></script>
<script src="js/SuperSimpleSlider.min.js"></script>
Once the scripts are imported you just need to create a new DIV and put images in it. At this point it is important to set the class to "simpleSlider" and give it an ID to differ between multiple sliders on the page (yeah, this is capable of multiple sliders):
<div class="simpleSlider" id="sNr1">
<img src="img/sampleImg1" alt="sample image 1" />
<img src="img/sampleImg2" alt="sample image 2" />
<img src="img/sampleImg3" alt="sample image 3" />
<img src="img/sampleImg4" alt="sample image 4" />
You will also need the ID to specify the height and width of your slider via CSS!
...well, there is no third, that's all for now. Your slider is ready to go, running with the default settings. How to change them and what you can adjust will tell you the settings section.

the settings


Here you can take a look at all the default settings:
sMoveTime = 1000; // slide-animation time (in ms)
sAutoplayDelay = 0; // delay between images (0 will turn it off)
sEnableTouch = true; // enable/disable touch mode
sEnableArrows = true; // enable/disable arrows
sArrowLeftUrl = 'img/arrow_left_white.png'; // image url for left arrow
sArrowRightUrl = 'img/arrow_right_white.png'; // image url for right arrow
sOverlayColor = 'rgba(0, 0, 0, 0.3)'; // color of the arrow overlay
sImageCrop = 'cover'; // image size (refers to background-size)
sImagePos = 'center center'; // image position (refers to background-position)
sBackgroundColor = 'transparent'; // slider bg-color
sExtraLayerColor = ''; // display an extra layer with an opacity
some of them are very much self-explaining, for all the others we have prepared some demos in the examples section. Also see the other tabs to learn more about how to configure your own settings.

You're not happy with the default settings? Well, this isn't much of a deal. Just change your global settings by adding a SCRIPT-Tag right after the import of SuperSimpleSlider.min.js:
<script type="text/javascript" >
sAutoplayDelay = 8000;
sOverlayColor = 'transparent';
sExtraLayerColor = 'rgba(255, 255, 255, 0.3)';
Of course you just need to change the properties which do not fit your requirements. In this case we:

   - set the autoplay to 8s
   - removed the arrow-overlay
   - added a white extra layer with an opacity of 0.3.

This won't cost you a lot of time, nevertheless you've got full control of the important settings.

Now, image you want to have unique settings for one or even for each slider. This also is a possible feature of this script. So in case you need individuality, here's what you need to do:
We get back to our setup example and simply add an attribute, called 'ssettings' (yes, double s), in the simpleSlider-DIV. There we add our unique settings for this specific slider
<div class="simpleSlider" id="sNr1" ssettings="sAutoplayDelay=4000; sExtraLayerColor='rgba(255, 255, 255, 0.2)';">
<img src="img/sampleImg1" alt="sample image 1" />
<img src="img/sampleImg2" alt="sample image 2" />
<img src="img/sampleImg3" alt="sample image 3" />
<img src="img/sampleImg4" alt="sample image 4" />
You just need to pay attention when it comes to properties which use a string, for example the 'sArrowLeftUrl' needs, depending on which one you use to set your attributes, single or double quotes. Also don't miss the semicolon after every property.
Another example, just the attribute:
ssettings="sEnableTouch=false; sArrowLeftUrl='img/arrow_left_black.png';"


We prepared different sliders with individual settings like it was shown in the settings-section. Every tile contains the changed settings and a slider displaying them:

sExtraLayerColor = 'rgba(255,255,255, 0.3)'; sMoveTime = 1500;
sEnableTouch = false;
sAutoplayDelay = 12000;
sOverlayColor = 'rgba(0, 0, 0, 0.25)';
sAutoplayDelay = 0;
sExtraLayerColor = 'rgba(255,255,255, 0.1)'; sEnableTouch = true;
sArrowLeftUrl = 'img/arrow_black.png';
sArrowRightUrl = 'img/arrow_black.png';
sImageCrop = 'contain';
sOverlayColor = 'transparent';
sMovetime = 200;
sEnableArrows = false;
sEnableTouch = false;
sAutoplayDelay = 5000;