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!
Mark 4 Aug, 2009
Continuous slider rocks!
Andris 4 Aug, 2009
Manu 4 Aug, 2009
Michael Caputo 4 Aug, 2009
cssglobe 4 Aug, 2009
Daveed Flexer 4 Aug, 2009
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 4 Aug, 2009
Here's the site I used it on:
http://megandjason.com
Austin Siewert 4 Aug, 2009
Manu 4 Aug, 2009
Ben 4 Aug, 2009
Josiah Katz 5 Aug, 2009
BBC Marketing 5 Aug, 2009
Michael 5 Aug, 2009
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 6 Aug, 2009
Can we have both numeric and button navigation at the same time?
Pandamo 6 Aug, 2009
var w = $("li", obj).outerWidth();
better
var w = $("li", obj).width();
???
Pandamo 6 Aug, 2009
This is only show one "li"....
Cain 6 Aug, 2009
Perhaps give buttons a show :false/true value as well.
Cain 6 Aug, 2009
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 6 Aug, 2009
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 6 Aug, 2009
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 6 Aug, 2009
is this possible in this version plz reply asap..
thanks for this cool slider.
Martin 6 Aug, 2009
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 6 Aug, 2009
eastwood 7 Aug, 2009
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 8 Aug, 2009
Umar 8 Aug, 2009
any one i want to use my keyboard arrow keys how can i use them.
Thanks!
Mathias 9 Aug, 2009
THE MOLITOR 9 Aug, 2009
Michel S 10 Aug, 2009
Nick Whitehouse 10 Aug, 2009
Matt Emery 10 Aug, 2009
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 11 Aug, 2009
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 12 Aug, 2009
Cameron 13 Aug, 2009
Mohsin Rafique 13 Aug, 2009
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 14 Aug, 2009
Karar A. 14 Aug, 2009
and Thank you very much.
John McMullen 14 Aug, 2009
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 14 Aug, 2009
if (options.hoverPause){
$('#slider').mouseenter(function(){
animate("stop",true);
});
$('#slider').mouseleave(function(){
if (options.continuous){
animate("next",false);
} else {
animate("next",true);
}
});
};
zac 14 Aug, 2009
sally 15 Aug, 2009
I want to use this slider for boxes of information
eg. How When Where
Robert 17 Aug, 2009
Are there problems with Lightbox and Easyslider together in one page?
Thanks,
Matt Emery 17 Aug, 2009
Jeremy Karney 17 Aug, 2009
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 17 Aug, 2009
Thanks - great lightweight slider otherwise!
Felipe Lima 18 Aug, 2009
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 18 Aug, 2009
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 18 Aug, 2009
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 19 Aug, 2009
A solution to centering the content if you have different size images would be in the CSS:
#slider ,#slider2{
text-align: center;
}
Ian 20 Aug, 2009
Mike 20 Aug, 2009
Any help would be much appreciated!
marujo 20 Aug, 2009
Jason 21 Aug, 2009
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 21 Aug, 2009
This appears to be an issue with the javascript, not the css. Unless I am missing something (it has been a long day).
Paolo 21 Aug, 2009
Is possibile to use numeric with simple next/prev button ?
Chris 21 Aug, 2009
$(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 21 Aug, 2009
A idea for the next release : the possibility to fit numeric controls above the slider ;-)
PattyR 21 Aug, 2009
gerafik 21 Aug, 2009
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 21 Aug, 2009
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 23 Aug, 2009
Dean 24 Aug, 2009
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 24 Aug, 2009
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 24 Aug, 2009
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 24 Aug, 2009
Thanks a lot
Chris 24 Aug, 2009
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 25 Aug, 2009
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 25 Aug, 2009
Sir, you are a genius. Awesome!
Ollie Wells 25 Aug, 2009
Ollie Wells 25 Aug, 2009
http://www.twentysixtwelve.co.uk/
:)
Tommy Arnold 25 Aug, 2009
Anita 26 Aug, 2009
(Actually they just increase the width of the list so that it looks as though there are empty slides.)
Andrew Philpott 26 Aug, 2009
Jamie 26 Aug, 2009
Cain 26 Aug, 2009
Kyle Florence 26 Aug, 2009
Kyle Florence 26 Aug, 2009
- 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 27 Aug, 2009
http://archive.kflorence.com/projects/easySlider/jquery.easySlider-1.8.js
Steve 27 Aug, 2009
web ink 27 Aug, 2009
Lastly, thankyou for making such a good and easy to use slider script available.
Kyle Florence 27 Aug, 2009
http://archive.kflorence.com/projects/easySlider/jquery.easySlider-kf.js
Helen P 27 Aug, 2009
Is there a way to restart the autoplay after a next/previous button has been clicked?
Ryan G 27 Aug, 2009
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 27 Aug, 2009
@John McMullen - Thanks for the added pause-on-hover effect - also exactly what I needed!!!
Matthew D 27 Aug, 2009
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 28 Aug, 2009
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 28 Aug, 2009
Marc 28 Aug, 2009
Sorry if this has been asked before
Kyle Florence 28 Aug, 2009
http://archive.kflorence.com/projects/easySlider/jquery.easySlider-kf.js
Kyle Florence 28 Aug, 2009
- 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 30 Aug, 2009
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. 31 Aug, 2009
This plugin rocks!!!
Keep it that way!
Greetz! Rado R.
Des 1 Sep, 2009
It would be great to add some kind of callback functionality . . .
onChange, do something, etc.
I'll be using it on many projects!!!
Willem 1 Sep, 2009
I was wondering how to position the numeric area right instead of left. Can someone help me with this?
Thanks!
Willem
Ramiro 2 Sep, 2009
Jamie 2 Sep, 2009
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 2 Sep, 2009
For Example:
Step 1: Intro Steb 2: Product .....
Thanks!
Jakob 3 Sep, 2009
The only thing is the buttons dont work.
what is wrong?
Oren 3 Sep, 2009
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.