Motivation

Another slider plugin? Yes! The motivation for the development of SSSlider came from the difficulty in finding a simple plugin, focused on showing content. On the web there are many sliders made for images and adapted to receive other content. In this case SSSlider is just for the content.

Important information and user’s license

This plugin is in ALPHA! Bugs can be found and if you fix one, send us a message. The ideal is to make a fork on GitHub, correct and send a pull request.
As for the license, it does not exist. You can do whatever you want with the code. No credit is needed. Just make good use and get to put on the air, send me the link to take a look and see if you did right!

Applying the plugin

The plugin requires a simple HTML markup. Just follow the example below, styling according to your preference.


<div id="panel_container">
   <div>
      <p>1</p>
   </div>
   <div>
      <p>2</p>
   </div>
   <div>
      <p>3</p>
   </div>
   <div>
      <p>4</p>
   </div>
</div>

In your JavaScript, include jQuery and the plugin code.


<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script><code>
<script type="text/javascript" src="js/jquery.ssslider.js"></script></code>

And finally, in a separate .js file or inline in your code, start the plugin.


$('#panel_container').ssslider();

There are optional parameters to be passed in the constructor of the slider, which indicate the direction it should take.


$('#panel_container').ssslider({ orientation: 'from_top' });
$('#panel_container').ssslider({ orientation: 'from_right' });
$('#panel_container').ssslider({ orientation: 'from_bottom' });
$('#panel_container').ssslider({ orientation: 'from_left' });

If nothing is passed, the default is “from_left.”

Navigation

Navigation between panels is at your choice. Just pass the index of the panel to be shown and leave the rest by the plugin. Remember that the index starts at 0 (zero).


$('#panel_container').ssslider('navigate', 1) // will take to the second panel

Moreover, one can have a simpler navigation, with links to “next” and “previous”. Consider:


$('#panel_container').ssslider('next') // next panel
$('#panel_container').ssslider('prev') // previous panel

Navigation is circular, that is, when you get to the last panel and the “next” is triggered, the panels back to the beginning.

Resize the container

If necessary resize the container, you need to execute a method in the plugin, just after the change of dimensions. This is because the internal panels are resized dynamically, inheriting dimensions of parent.


resize.on('click', function(){
   container.css({
      'width':'200px',
      'height':'500px'
   });
   container.ssslider('resize'); // only to call the 'resize' method from the plugin
});

Example:

An example of this plugin may be found here.

Collaborators

  • Fábio Vedovelli (@vedovelli)
  • Marcos Junior (@marcosgugs)

Download

You may download the plugin here

One thought on “SSSlider – Super Simple Slider

Leave a Reply