Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Intelligent and super simple HTML5 slider

Saturday, December 8th, 2018 by Servage

super-simple-sliderAs 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.

Intelligent and super simple HTML5 slider, 5.0 out of 5 based on 3 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.