As it says on the official Super Simple Slider website, there are already many sliders out there. However, there is something special about Super Simple Slider. As the name suggests, it is super simple to set up and it supports all types of content from images to divs and text. It also includes other useful features that we are going to describe in this article.
Installation part one: Downloading the required files
To add the slider to your website, you should first go to the official www.supersimpleslider.com website and download the files to your project folder. There are three files and one folder you need: An images folder, jQuery, a stylesheet file and a JavaScript file. You can use either the minified or original version of the JavaScript file. jQuery is not included so you will have to download it manually if your project does not already have it. The official installation guide uses version 1.9.0 of jQuery and you can download it from www.jquery.com.
Include all these files on your website: the stylesheet in the <head> section and the JavaScript files before the closing tag of <body>. Make sure that jQuery comes before the other JavaScript file because they depend on jQuery.
Installation part two: Setting up the slider
The first part was simple enough, and setting up the slider on your website will not get much more difficult. Once the required files are included, you need a div with a class of “slides” and some content inside it. The content can be divs, images, videos or something else.
The last step is to call the sss() JavaScript function on the slider div:
$(‘.slider’).sss();
You can do this when the document has loaded, so inside the document ready function of jQuery. Remember to place this code below the two JavaScript files you included earlier, otherwise it will terminate with errors saying that jQuery does not exist (yet). If you want to do this the easy way, copy and paste the sample code from the official website. When that is done, you should have a functioning multi-content slider on your website.
Customizing the slider
Even though the slider is simple, it contains a few customization options. You can change the slide to start from, set slider and transition speeds, toggle navigation arrows, as well as a couple of other options. To set these options, you can pass in an object as an argument when calling the sss() function, for example:
$(‘slider’).sss({ speed: 5000 });
This would set the speed of the animation to change the slide every 5000 milliseconds. Multiple options can be separated by comma just like with a regular JavaScript object. For a complete list of the available customization options, check out the documentation at www.supersimpleslider.com.
No comments yet (leave a comment)