Simple slider ... An easy to use slideshow

Thought behind Simple Slider

There are many, and I mean many, different content sliders. They can have a lot of features and skins which can make them big, but if you will use these features that might be what you need. If you don't need a lot of different settings and want to style it by yourself in CSS Simple Slider might be for you. If you can handle CSS, HTML and basic english you can handle this plugin.

Simple Slider has been developed to be a simple lightweight plugin for users that want to be able to add there own CSS without breaking the plugin. The plugin can be responsive or static depending on the need, or why not static before a media-query break and then be set at a percent, if you can do it in CSS you can do it in this plugin. Simple Slider does not need to only contain images but can contain what ever kind of HTML-element you desire.

Comparison to other slideshows

Here is a quick comparison to other slideshows out there, I have focused on these components because they are the reason it exists. I have focused on information that is made easy to get for everyone and does not need my opinions.

Name Size in kB Complexity * Responsive Works without images
Simple slider 7.13 5 Yes Yes
Competitor 1 52.3 81 No No
Competitor 2 20.6 11 Yes Yes
Competitor 3 12.3 15 Yes No
Competitor 4 4.7 7 No Yes

* Cyclomatic complexity number is a number that explains how complex or complicated the code is to understand, the lower value the easier it is.

How to get it to your page

To get this plugin to work you first need jQuery connected to your webpage. You also need to connect the provided JS file below the jQuery library. In your HTML body you need the id and classes explaned in the HTML code Example below. And last you need to add $( "#slider" ).simpleSlider(); inside of a script tag in the bottom of your body. If this sounds hard take it easy, the zip-file contains an example HTML code on how its structured.

HTML code example

Here is one basic HTML example, the id slider and the the class names, slides and slide makes the jQuery works but you can add your own classes and other elements to add content and design it as you want. In this example you have a p tag and a image, these are styled with normal CSS.

Simple Slider settings

If you want to change settings on Simple Slider just open the provided JS file and in the top you will find this object. Here you can set prefered settings as in animation speed or navigation options.