download now

The All-New SolanoSlider

An Easy-To-Use, Multi-Purpose Jquery Plugin

What Does It Do?

The SolanoSlider, in its most basic form, will take the elements within a div and slide through them using a navigation created by you or the plugin.

Why Would I Use It?

When Starting out with jQuery, especially when building your first image gallery, it is common for designers to assign a separate functiuon to every single piece of content. For example, If I had 5 pieces of content in my gallery, I would end up with 5 statements, one for each piece and its respective button. While it's not difficult, this code can become inefficient and cumbersome.

This is where the SolanoSlider comes in. It doesn't matter how many pieces of content you have. Just let the plugin know what the containing div is, and where the navigation goes, and it will do the rest!

But Is That All?

Nope! Because the core of the SolanoSlider is so simple, it is in turn very flexible. While I am working at streamlining this process, it is pretty easy to change a line or two and end up with something completely custom to your needs. In my own experience, I have used these same lines of code for galleries, fullpage accordions, and more. With just a little jQuery knowhow, you can too!

Examples of what the SolanoSlider can do
Basic Slider - Generated Buttons
retro 1 retro 2 retro 3
Script Used 
$('#example1').solanoSlider({
    autoNav : true,
    navID : "#nav1",
    speed : 1200
});

Basic Slider - Custom Buttons
retro 1 retro 2 retro 3 retro 4
Script Used 
$('#example1').solanoSlider({
    autoNav : false,
    navID : "#nav2",
    speed : 800
});

*Notes: The code that controls the navigation hovers was done separately. Feel free to take a look at this site's source to see how I set it up.

Complex Slider - Custom Transitions

Cat

Feline mammal usually having thick soft fur and no ability to roar

Kitten

Dog

A member of the genus Canis (probably descended from the wolf) that has been domesticated by man since prehistoric times

puppy

Turtle

Any of various aquatic or terrestrial reptiles having horny toothless jaws and a bony or leathery shell into which the head, limbs, and tail can be withdrawn in most species

turtle
Script Used 
$('#example3').solanoSlider({
    autoNav : false,
    navID : "#nav3",
    customTransitions: true,
    cssStart: function(){$(this)
              .find('.petinfo').hide()
              .end().find('.petpicimg')
              .css({'left':'-200px'})},
    cssFirst: function(){$(this)
              .find('.petinfo').show()
              .end().find('.petpic img')
              .css({'left':'6px'})},
    transIn : function(){$(this)
              .find('.petinfo').fadeIn
              (800).end().find('.petpic 
              img').delay(800).animate({
              'left':'6px'},600)},
    transOut: function(){$(this)
              .find('.petinfo').fadeOut
              (800).end().find('.petpic 
              img').animate({'left':
              '-200px'},600)}
});

*Notes: While this may look a bit crazy, understand that this is just demonstrating the ability to create your own animation chains, making them as simple or complex as you want. Refer to the Guidelines for more details.

Guidelines for using the solanoslider setup Huh?

- First, download the SolanoSlider. Unzip the folder and place the files into the root folder of your website.

- Next, place the following lines of code into the <head> of your HTML document:

<link href="solanoslider.css" type="text/css" rel="stylesheet"  />
<script src="jquery-1.4.2.min.js" type="text/javascript" ></script>
<script src="jquery.solanoslider.js" type="text/javascript"></script>

- If you haven’t already created the HTML elements for the SolanoSlider to work with, now would be the time to do so. A basic setup might include a <div> that will contain the images/content as well as another <div> in which the navigation will go. For example, the following code could be used in the <body> of your HTMl document:

<div id="mycontent">
    <img src="img1" />
    <img src="img2" />
    <img src="img3" />
</div>

<div id="mynav">

</div>

- Finally, you must tell the SolanoSlider where your rotating content is located as well as the navigation that will control it. Place the following code in the <head> of your document, below the previous script tags:

<script type="text/javascript" >
                    
    $(document).ready(function(){
					
        $('#mycontent').solanoSlider({
            autoNav : true,
            navID : "#mynav"
        });	
        
    });

</script>

- With this code, the images inside of #mycontent will become the different slides. Also, because 'autonav' is set to true, the navigation will automatically be generated inside of #mynav based upon the number of images.

options

The SolanoSlider, like most plugins, has the ability to accept options. Options allow you to customize and use the SolanoSlider to your needs, without having to dig into the actual plugin code.

The code that I have used may not be the most efficient, but it does work. I will be looking to expand and enhance the options as time goes on.

autoNav

Default: 'false'

Leave as 'false' if you will be be using navigation buttons that are created manually. Set to 'true' if you would like the SolanoSlider to create the navigational buttons for you.

navID

Default: ''

Please indicate the container's id or class that will hold the navigation. This must be done everytime the SolanoSlider is used.

speed

Default: '800'

The speed defines how fast the default animation takes place.

customTransistions

Default: 'false'

Set this to 'true' if you would like to create a custom animation chain that the SolanoSlider will cycle through.

transIn

Default: 'null'

If using a custom transitions, this is where you define the animation for the incoming element. Wrap your jQuery chain in 'function(){ Your stuff here }'. Must be defined if customTransitions is set to 'true'.

transOut

Default: 'null'

If using a custom transitions, this is where you define the animation for the outgoing element. Wrap your jQuery chain in 'function(){ Your stuff here }'. Must be defined if customTransitions is set to 'true'.

cssFirst

Default: 'null'

If using a custom transitions, this is where you define the starting state of your first element. This will also allow you to include any intro animations and such in your slider. Wrap your jQuery chain in 'function(){ Your stuff here }'. Must be defined if customTransitions is set to 'true'.

cssStart

Default: 'null'

If using a custom transitions, this is where you define the starting state of all other elements excluding the first. Wrap your jQuery chain in 'function(){ Your stuff here }'. Must be defined if customTransitions is set to 'true'.

Help and Contributing

If you have any questions or comments, please feel free to email me at matt@mattsolano.com. The SolanoSlider is not perfect, and I understand that. Your comments and support will help me make it the best it can be. Thanks in advance!

Also, the SolanoSlider is currently a one-man-show side project. If you have experience developing jQuery plugins and would like to provide your advice or assistance, that would also be greatly appreciated.

Finally, if you like what you see and are interested in the rest of my work, my portfolio can be found at mattsolano.com