jQuery plugin - Easy Image or Content Slider
This is my first jQuery plugin. I wrote several jQuery scripts but never made a real plugin just because I was I afraid of it's complexity. It turned out to be a lot easier than I thought so I went ahead and created this one.
Easy Slider (as I call this plugin) enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css.
Getting Started
First you'll need content and it should be wrapped inside a div containing an ordered list where each list item represents one slide. Here's a markup example:
<div id="slider">
<ul>
<li>content here...</li>
<li>content here...</li>
<li>content here...</li>
...
</ul>
</div>
You can basically put whatever you want inside list items as long as you keep the same dimensions. My initial idea was to use this slider for image gallery as on Templatica's homepage but I've used it for other stuff too.
To activate the script you will need to download the files, place jQuery file and easySlider.js somewhere on your site and link to them:
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/easySlider.js"></script>
The action starts when you add this lines of code to your JavaScript:
$(document).ready(function(){
$("#slider").easySlider();
});
This basically initiates the script on page load where "#slider" is css selector of the element(s) that you wish to apply script to. You can also use multiple elements using their class names i.e. $(".list").easySlider();
Next is up to your preferences - styling. This is how default styling looks like:
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li{
width:500px;
height:200px;
overflow:hidden;
}
span#prevBtn{}
span#nextBtn{}
Not much there, is it? The most important thing here is to keep the same dimensions for the content area and each list item (slide). Also, overflow:hidden is obligatory. Other than that, you have free hands in adding your own style to the Easy Slider! To get an idea how it can be spiced up, you may take a look at Templatica's homepage.
How does it all work
Script automatically adds "previous" and "next" buttons in form of span elements with nested anchors just after the content element. Spans have assigned IDs that you can use for css selecting:
<span id="prevId"><a href="javascript:void(0);">Previous</a></span>
<span id="nextBtn"><a href="javascript:void(0);">Next</a></span>
On each click (previous or next button) script calculates the current "position" and makes a one step in requested direction. So, the slider jumps from one slide to another. Once it reaches the end (last slide), the "next" button fades away and re-appears only if "previous" button is clicked again. Same goes for sliding towards the beginning.
Options
The following options are configurable:
- prevId - id for "previous" button
- prevText - text for "previous" button
- nextId - id for "previous" button
- nextText - text for "next" button
- orientation - horizontal or vertical, horizontal is default and if you want vertical set this to 'vertical'
- speed - animation speed in milliseconds, default value is 800
Yes, you saw it correctly, vertical sliding is also possible! :)
Options are added when calling the script:
$(document).ready(function(){
$("#slider").easySlider({
prevText: 'Previous Slide',
nextText: 'Next Slide',
orientation: 'vertical'
});
});
Make sure that you don't put the comma after last option.
Demos
Here are some blank, non styled demos. Check out the script in action:
To check out styled demo, please visit Templatica.
What makes this slider script different
Because of it's simplicity and light-weightness (is that a word ?! ) I believe that is is much easier to deal with this plug in and configure it. The appearance is totally editable with css so all of you afraid of getting their hands dirty with JS code can easily use this.
from http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider