I got a lot of emails and feedback about my easySlider plugin, thank you all for that. However, I have to apologize to all of you who sent emails asking for a little help with implementation or small bug fixes. I simply don't have the time to answer all of your emails. I wish I do.
What I am presenting you today is an easySlider update with 2 new features. When going through your feedback I noticed 2 feature suggestions appearing very often:
- numeric navigation (as an alternative to next/previous buttons)
- continuous scroll instead of jumping to the first (or last) slide
So, that's what I implemented in this new version. Now you have the option to choose between classic previous/next navigation or to use a numeric "pagination" style navigation.
Also, your suggestion about continuous scroll made most sense, it is kind of annoying when you have many slides and have to wait for all of them to scroll back to the first one. I had to include it in this version.
I suggest that you read about previous versions in order to understand better how it works:
Options
So, let's go through all of the options. For your convenience I have written the options from previous version of this plugin, so you can have it all in one place. Here they are with their default values:
prevId: 'prevBtn', prevText: 'Previous', nextId: 'nextBtn', nextText: 'Next', controlsShow: true, controlsBefore: '', controlsAfter: '', controlsFade: true, firstId: 'firstBtn', firstText: 'First', firstShow: false, lastId: 'lastBtn', lastText: 'Last', lastShow: false, vertical: false, speed: 800, auto: false, pause: 2000, continuous: false, numeric: false, numericId: 'controls'
prevId
Id attribute for "previous" button. Default value is "prevBtn".
prevText
Inner text for "previous" button. Default value is "Previous".
nextId
Id attribute for "next" button. Default value is "nextBtn".
nextText
Inner text for "next" button. Default value is "Next".
orientation
Sliding can be horizontal or vertical. Horizontal is default and if you want vertical set this to 'vertical'.
speed
Animation speed in milliseconds, default value is 800.
controlsShow
By default set to true, but if set to false it will not add any controls. It can be used with auto scroll when you want to disable user interaction.
controlsBefore and controlsAfter
In case you want to add some additional markup to gain more control over buttons you can do so by using these parameters. Check out the demo where I use these options.
controlsFade
By default set to true. If set to false it will disable button hiding when slider reaches the end.
firstShow and lastShow
These parameters hide (or show) "go to first" and "go to last" buttons.
auto
This option enables automatic sliding. If you set it to true the sliding will automatically start and continue to perform untill user clicks one of the buttons.
pause
This option is set in milliseconds and it represent the duration of each slide when plugin is set to auto sliding.
continuous
If set to true clicking the next button when the slider reached the end will simply continue showing all of the slides again with continuous motion. Combining this option with auto (both set to true) you'll get endless animation.
numeric (NEW!)
If you set this option to true you will get numeric navigation instead of next/prev buttons. Plugin will create an ordered list just after the slider div. Ordered list will have the exact number of elements as the slider. Clicking on each of the number will make the animation jump to a certain slide.
numericId (NEW!)
This option defines id attribute for the ordered list. You should use this id to select and style the list with CSS.
Demos
I have 3 new demos here:
Here you go. If you have any more suggestions, please send them to me and I will consider of implementing them in the next plugin version!
Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of
Mark on 4 Aug, 2009 wrote:
Continuous slider rocks!
Andris on 4 Aug, 2009 wrote:
Manu on 4 Aug, 2009 wrote:
Michael Caputo on 4 Aug, 2009 wrote:
cssglobe on 4 Aug, 2009 wrote:
Daveed Flexer on 4 Aug, 2009 wrote:
I was wondering if there is a way to paginate the "screens". IE update URL and have this new URL be such that when entered into browser window it opens appropriate "screen"/
I've made some attempts to customize, but without much success yet.
DF
existdissolve on 4 Aug, 2009 wrote:
Here's the site I used it on:
http://megandjason.com
Austin Siewert on 4 Aug, 2009 wrote:
Manu on 4 Aug, 2009 wrote:
Ben on 4 Aug, 2009 wrote:
Josiah Katz on 5 Aug, 2009 wrote:
BBC Marketing on 5 Aug, 2009 wrote:
Michael on 5 Aug, 2009 wrote:
But i stumble over a small bug and i hope i could get some help.
If you load a great amount of pictures and not all images are preloaded before you hit the first time the next button.
These Images will not load completely or they wont load at all.
Any solution for this ?
Thanks in advance!
Michael
Chame on 6 Aug, 2009 wrote:
Can we have both numeric and button navigation at the same time?
Pandamo on 6 Aug, 2009 wrote:
var w = $("li", obj).outerWidth();
better
var w = $("li", obj).width();
???
Pandamo on 6 Aug, 2009 wrote:
This is only show one "li"....
Cain on 6 Aug, 2009 wrote:
Perhaps give buttons a show :false/true value as well.
Cain on 6 Aug, 2009 wrote:
I did get the numeric and buttons to show by slightly modifying the JS. However ran into a bug; for example: lets say there are 5 images. If I click on the NUMERIC "#4" then click on the NEXT BTN, the image would keep scrolling to invisible space. Will take 10+ seconds before it reloads to #1 image.
Perhaps the author has a better solution.
Roger on 6 Aug, 2009 wrote:
But when I try vertical true, it fails and flips on the demo download.
Also it would be great if we could have the option for some nice fade in fade out.
Like this:
onBeforeSeek: function() {
this.getItems().fadeTo(300, 0.2);
},
// when seek ends resume items to full transparency
onSeek: function() {
this.getItems().fadeTo(300, 1);
}
Cheers!
steve on 6 Aug, 2009 wrote:
goto this page (http://sickman.info/v2/#home) and it works when first loading. click on another menu item, and then click on "steve sickman design" to go back to the home page. the slider div and ul get their width and height set to 0 and none of the slides show up.
now on this page (http://sickman.info/v1/#home) the slider is manually started so it works when repeating the above steps
any help is appreciated
Kannan.BKN on 6 Aug, 2009 wrote:
is this possible in this version plz reply asap..
thanks for this cool slider.
Martin on 6 Aug, 2009 wrote:
But i'd like to add some pause- and play-button (with active-status). Is this possible (or maybe a feature for next version)?
Terry on 6 Aug, 2009 wrote:
eastwood on 7 Aug, 2009 wrote:
Add this around line 141. Just before the animate function.
$('#slider').mouseenter(function(){
animate("stop",true);
});
Add this around line 158. You adding the case for when you call the stop dir.
case "stop":
t = t;
break;
Mr Ye on 8 Aug, 2009 wrote:
Umar on 8 Aug, 2009 wrote:
any one i want to use my keyboard arrow keys how can i use them.
Thanks!
Mathias on 9 Aug, 2009 wrote:
THE MOLITOR on 9 Aug, 2009 wrote:
Michel S on 10 Aug, 2009 wrote:
Nick Whitehouse on 10 Aug, 2009 wrote:
Matt Emery on 10 Aug, 2009 wrote:
Pause the slideshow on mouseover and resume the slideshow on mouseout.
Add this around line 141. Just before the animate function.
$('#slider').mouseenter(function(){
animate("stop",true);
});
$('#slider').mouseleave(function(){
animate("next",true);
});
Add this around line 158. You adding the case for when you call the stop dir.
case "stop":
t = t;
break;
eric on 11 Aug, 2009 wrote:
I was thinking about putting a counter like "Slide 1/5" near the back and prev buttons. Maybe another option to include in your next version?
kelly on 12 Aug, 2009 wrote:
Cameron on 13 Aug, 2009 wrote:
Mohsin Rafique on 13 Aug, 2009 wrote:
Well i have a query regarding to Easy Slider and it is about is it possible to control the opacity of the slider image. I mean onload the loade images in slide show have 80% opacity and when mouse move over the slider image, it's opacity becomes 100%.
FOr reference what feature i am looking in your code, you can see from this URL http://www.andrewplummer.com/portfolio/
I hope i will have a positive response from your end.
Leannekera on 14 Aug, 2009 wrote:
Karar A. on 14 Aug, 2009 wrote:
and Thank you very much.
John McMullen on 14 Aug, 2009 wrote:
Add an additional default property around line 57 (end of the list):
hoverPause: false (be sure to add the comma to the property above it)
Around line 141 add this entire block of code:
if (options.hoverPause === true){
$('#slider').mouseenter(function(){
animate("stop",true);
});
$('#slider').mouseleave(function(){
animate("next",true);
});
}
Then add the case "stop" as mentioned above, copied here:
case "stop":
t = t;
break;
This way it integrates into the plugin and you can turn it on/off.
John McMullen on 14 Aug, 2009 wrote:
if (options.hoverPause){
$('#slider').mouseenter(function(){
animate("stop",true);
});
$('#slider').mouseleave(function(){
if (options.continuous){
animate("next",false);
} else {
animate("next",true);
}
});
};
zac on 14 Aug, 2009 wrote:
sally on 15 Aug, 2009 wrote:
I want to use this slider for boxes of information
eg. How When Where
Robert on 17 Aug, 2009 wrote:
Are there problems with Lightbox and Easyslider together in one page?
Thanks,
Matt Emery on 17 Aug, 2009 wrote:
Jeremy Karney on 17 Aug, 2009 wrote:
I tried to use the same tags as the numerical navigation, but it did not pick it up, I am assuming because it is outside of the slider div.
Here is the site:
http://thenearsky.com/sb/
Luc Pestille on 17 Aug, 2009 wrote:
Thanks - great lightweight slider otherwise!
Felipe Lima on 18 Aug, 2009 wrote:
In the function adjust(), add the following line to its third line:
options.onChange(t);
Then, call the slider with an additional onChange option:
$("#slider").easySlider({
(...)
onChange: onChangeImg
});
function onChangeImg(index) { /* do something on image change */};
The function receives the zero-based image index. Maybe you'll want to add this functionality to the next version, since it's fairly small!
Thanks and keep the nice work!!!
Felipe
Edith on 18 Aug, 2009 wrote:
In HTML:
<li><a href=""><img src="images/slide.jpg" alt="" /> <span> text goes here </span> </a> </li>
In CSS:
#slider li span {display: block; width: Xpx; height:40px; background: transparent url(../images/slide.png) repeat 0 0; margin-top: -40px; position: relative; }
And voila, you have a text overlay which slides with the images.
Many thanks, Edith
Arjun Mehta on 18 Aug, 2009 wrote:
I noticed a bug for the vertical option on line 134 of the js file:
$("ul",obj).css("margin-left",(t*h*-1));
should be:
$("ul",obj).css("margin-top",(t*h*-1));
I was perplexed as to why my list was sliding over to the left! hah.
Stephen on 19 Aug, 2009 wrote:
A solution to centering the content if you have different size images would be in the CSS:
#slider ,#slider2{
text-align: center;
}
Ian on 20 Aug, 2009 wrote:
Mike on 20 Aug, 2009 wrote:
Any help would be much appreciated!
marujo on 20 Aug, 2009 wrote:
Jason on 21 Aug, 2009 wrote:
I have been implementing this scroller into wordpress, I'll share the code with you when I get done, I have been trying to use small thumbnails to navigate through the list, but am not quite sure how you are getting the value for each list item. When you call NEXT do you use child methods to navigate through the list? I tried adding a custom ID to each item, but to no avail... What I am trying to do is something to this effect: http://www.fuseboxtheatre.com/
PattyR on 21 Aug, 2009 wrote:
This appears to be an issue with the javascript, not the css. Unless I am missing something (it has been a long day).
Paolo on 21 Aug, 2009 wrote:
Is possibile to use numeric with simple next/prev button ?
Chris on 21 Aug, 2009 wrote:
$(document).ready(function(){
$("#slider1").easySlider({
continuous: true,
numeric: true
});
$("#slider2").easySlider({
continuous: true,
numeric: true,
numericId: 'control2'
});
});
Whatever you call your second slider numericId you'll need to duplicate your CSS for it. Hope that makes sense,
Pierre on 21 Aug, 2009 wrote:
A idea for the next release : the possibility to fit numeric controls above the slider ;-)
PattyR on 21 Aug, 2009 wrote:
gerafik on 21 Aug, 2009 wrote:
How to show images side by side without border and white spaces - when I have small pictures, smaller than container dimension??
(I want to see others neighbouring images near selected images)
thanks for help
Pierre on 21 Aug, 2009 wrote:
It would nice if the numeric control choice the shortest way between 2 slides (example : slide 9 is active, I click on 2 -> it should go on slide 1 then slide 2, not get back on slide 8, 7, ... til slide 2)
Great job anyway :-)
wedhaaf on 23 Aug, 2009 wrote:
Dean on 24 Aug, 2009 wrote:
Amazing work on this plugin it's really easy to use and works perfectly (apart from the vertical setting!!) I love it! Thanks for sharing.
gerafik on 24 Aug, 2009 wrote:
I check that if I delete settings "dimension height" in "#slider li, #slider2 li" It show me correctly photos - side by side, but It wrong calculate right photo in right place, there is some bug... maybe in js.
Pleas check: http://www.gerafik.pl/test/test.php
Any idea for solution...?
Ollie Wells on 24 Aug, 2009 wrote:
I too have managed to get both numbers and navigation arrows showing with some hacking of the code.
Is there a nicer way of doing this?
Im having the same issues as Cain where it scrolls off the page then returns 10 seconds or so later to the first image.
Help!! :)
Fernando on 24 Aug, 2009 wrote:
Thanks a lot
Chris on 24 Aug, 2009 wrote:
I found a solution for our problem.
Try to modify the animate-function from "default: t = dir;break;" to "default:t = parseInt(dir);break;"
Now it works fine with numbers and navigation arrows together.
James on 25 Aug, 2009 wrote:
1) I need it to scroll vertically, but when I set it to continuous at the same time I have problems... seems to skip a slide or add in a blank one... this only happens when both are set to true...
2) I want the buttons to be placed at the top and bottom of the slide as opposed to the left and right... how can I get them to line up that way as if they look like up and down arrows... I understand I will have to change the arrow graphics...
Great script... and thanks to Arjun Mehta for the bug fix.
Ollie Wells on 25 Aug, 2009 wrote:
Sir, you are a genius. Awesome!
Ollie Wells on 25 Aug, 2009 wrote:
Ollie Wells on 25 Aug, 2009 wrote:
http://www.twentysixtwelve.co.uk/
:)
Tommy Arnold on 25 Aug, 2009 wrote:
Anita on 26 Aug, 2009 wrote:
(Actually they just increase the width of the list so that it looks as though there are empty slides.)
Andrew Philpott on 26 Aug, 2009 wrote:
Jamie on 26 Aug, 2009 wrote:
Cain on 26 Aug, 2009 wrote:
Kyle Florence on 26 Aug, 2009 wrote:
Kyle Florence on 26 Aug, 2009 wrote:
- Make it possible to use both the numeric navigation and the previous/next buttons (this is an easy fix).
- Add an easy way to switch between putting the navigation items above or below the slider content (should also be easy).
Kyle Florence on 27 Aug, 2009 wrote:
http://archive.kflorence.com/projects/easySlider/jquery.easySlider-1.8.js
Steve on 27 Aug, 2009 wrote:
web ink on 27 Aug, 2009 wrote:
Lastly, thankyou for making such a good and easy to use slider script available.
Kyle Florence on 27 Aug, 2009 wrote:
http://archive.kflorence.com/projects/easySlider/jquery.easySlider-kf.js
Helen P on 27 Aug, 2009 wrote:
Is there a way to restart the autoplay after a next/previous button has been clicked?
Ryan G on 27 Aug, 2009 wrote:
It seems to me like this part - $("ul",obj).css('width',s*w);
- is being prevented from working... and that the display:none style is the culprit. However, it'd be rad if someone smarter than me could replicate/verify/fix it!
Becca P on 27 Aug, 2009 wrote:
@John McMullen - Thanks for the added pause-on-hover effect - also exactly what I needed!!!
Matthew D on 27 Aug, 2009 wrote:
I made a slight modification that others may find useful, it uses the size of the div element rather than the individual li's, this is useful for when you want content to slide in and slide out without others li's showing regardless of dynamic width.
Modify the starting of this.each(function(){
to look like the following to achieve this:
var obj = $(this);
$('li',obj).each(function() {
$(this).width($(obj).width());
});
var s = $("li", obj).length;
var w = $(obj).width();
var h = $("li", obj).height();
Technically the var w = $(obj)...... line isn't a required change but it is a little quicker as there's less DOM traversal.
Ryan G on 28 Aug, 2009 wrote:
I have it working here: http://www.blueskiesabove.us/pgrls/foo2.html
but once I add onclick behavior it stops working: http://www.blueskiesabove.us/pgrls/foo.html
Any chance you could look at that? I'm not proud to say that I've been working on this for a couple weeks...
I've tried a few different ways of coding the onclick. The current version seems like a slight improvement. But it's still not there. I think the slider div is still being affected by how the "butthead" div starts out as display:none;.... you can email me at master.cob gmail, if you feel like helping ;) thanks.
Vic on 28 Aug, 2009 wrote:
Marc on 28 Aug, 2009 wrote:
Sorry if this has been asked before
Kyle Florence on 28 Aug, 2009 wrote:
http://archive.kflorence.com/projects/easySlider/jquery.easySlider-kf.js
Kyle Florence on 28 Aug, 2009 wrote:
- Fixed nested lists breaking the plugin.
- Removed javascript:void(0) calls from anchor tags (replaced with # and return false;)
- Fixed vertical sliding bugs when continuous is set to true
- Fixed vertical sliding bug that caused vertical slides to shift to the left
- Added the option to have both numeric navigation and first/previous/next/last buttons at the same time
- Added an option that allows the controls to be placed above or below the main content area
- Added the option for custom easing animations
The link to download it is here:
http://archive.kflorence.com/projects/easySlider/jquery.easySlider-kf.js
Markus on 30 Aug, 2009 wrote:
at first i have to say, the slider is a big ones ;-)
i have a question. is it posibly to write a word (example hello, test, anyone, ..) and not the number (01, 02, 03,).
thanks for your help and sorry for my bad englisch!
greets from austria
markus
Rado R. on 31 Aug, 2009 wrote:
This plugin rocks!!!
Keep it that way!
Greetz! Rado R.
Des on 1 Sep, 2009 wrote:
It would be great to add some kind of callback functionality . . .
onChange, do something, etc.
I'll be using it on many projects!!!
Willem on 1 Sep, 2009 wrote:
I was wondering how to position the numeric area right instead of left. Can someone help me with this?
Thanks!
Willem
Ramiro on 2 Sep, 2009 wrote:
Jamie on 2 Sep, 2009 wrote:
Wow this really is such a great script. So easy to use and looks great.
Would just like to know if someone can help me. The script looks great on all the browsers except for ie 7 and lower. For some reason on ie 7 and ie 6 the images dont display as a slider but rather all of them show one on top of the other. Is there any reason for this?
Thanx
Jamie
cester on 2 Sep, 2009 wrote:
For Example:
Step 1: Intro Steb 2: Product .....
Thanks!
Jakob on 3 Sep, 2009 wrote:
The only thing is the buttons dont work.
what is wrong?
Oren on 3 Sep, 2009 wrote:
thereare some modification do to: when I use the following head tag the tool is not working <html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" lang="he">
to make it work, i changed the the slider div:
<div id="slider" dir="ltr"> and it is working very good,
thanks for sharing.