Easy Slider 1.5 - The Easiest jQuery Plugin For Sliding Images and Content

written on:26 Jan, 2009 by Alen Grakalic

Version 1.5 of my Easy Slider plugin for jQuery is here. This is one of the my rare scripts that make it to their second version.
All of the features here are result of your comments, so if you have more ideas, keep 'em coming!

Note: in case you haven't already, you might want to check out article about first version of this plugin.

Download easySlider1.5.zip

Features

This version features:

auto slide
continuous sliding
"go to first" and "go to last" button
hiding controls
optional wrapping markup for control buttons
vertical sliding
multiple sliders on one page

Here are the things you can customize (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

I will explain new options:

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 auto sliding, Just set it to true.

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 jump to the beginning (and vice-versa). Combining this option with auto (both set to true) you'll get endless animation

Demos

I have prepared 5 demos, although I could have done zillions. Hopefully I will have the time to create more good demos as I continue to develop this plugin

Future

I already have some ideas about next versions (play/pause buttons, numbered pagination...) but I would also like you to share any idea you might have.

About the author

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 Easy front-end framework.
To get in touch, visit Alen's personal page, follow Alen on Twitter or become a Facebook friend.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on Facebook Tweet this Delicious StumbleUpon Reddit Subscribe

Comments

Sérgio Soaes 26 Jan, 2009

good job :)
very beautiful sliders
cheers
Erick 26 Jan, 2009

Awesome plugin!! great job. Tested it and I'm really digging it.
can't wait to use it on my live site!!

superb work!
sOledad arismendi 26 Jan, 2009

great script! and this version is even better! i was looking forward it the last days! thanks a lot!!!!!! you've done a great job!
Khaled 26 Jan, 2009

that's cool! any hope to see multiple slides at one time? ie say you have a UL with 8 LI elements, can you show two at once and still skip forward / backward by 1 LI element at a time
egohavoc 26 Jan, 2009

Just a question: I have a client that want's this scroller (excellent work btw) - But he wants 3 or 4 images shown at a time. I was wondering if there was a way to show more than one image and scroll one image to the left or right. Effectively, have 3 images. 1, 2, 3 are showing. Click "next" and image "1" leaves, revealing image "4", now showing images 2, 3, 4. I suppose I could "fake it" with HTML but i feel like this would be counter-productive. Thanks!
cssglobe 26 Jan, 2009

ok, multiple slides (images) at the same time... Noted for future version.
Michael 26 Jan, 2009

hi, really cool piece of code.
just one feature request (or idea):
it would be amazing that in continuous mode it would not scroll over all the slides in the middle and in the 'wrong' direction.
you could just copy the last slide before the first, and the first after the last, so you have this smooth continuous scrolling, and then just jump to the real end or start in the background.
Alen B. 26 Jan, 2009

mega. Outstanding job.

Nice demos.
alain 27 Jan, 2009

I second what Michael. It's kind of dizzying the ways it slides back to the first image. Nevertheless, it's a great piece of code and I applaud you!!
Colin Scroggins 27 Jan, 2009

When using auto slide mode, if the user click on the previous or next links, the slides require manual navigation from that point forward. It would be nice if auto slide would resume in a user-determined amount of time as long as the mouse is not hovered over the slide or control links.
Will Paccione 27 Jan, 2009

Nice! Gotta love jQuery!
thanks!
Belinda Clemesha 27 Jan, 2009

Thank you so much for the updated version, it's awesome! Appreciate all your efforts. Cheers.
Victor 27 Jan, 2009

i definitely second the motion to implement numeric pagination. it would be cool if you could specify the shell div class and a child pagination class that has an attribute for the target page number.
Nicolas Borda 27 Jan, 2009

I commented in the old post before knowing the updated version had already been posted. Again, I think this plugin is fantastic, thanks so much! The only problem I have with it is that if list items have nested divs or other elements, they're considered additional slides and you get empty slides in your slider. How can we solve this?
Liam Morley 27 Jan, 2009

Not bad. I think it'd be nicer if going from the last frame to the first frame didn't take as long- perhaps if either this was sped up, or if the first frame followed after the last frame (maybe with a different type of visual cue to let know you you've gone full circle).

Also, in Chrome, the 'prevBtn' image doesn't appear unless you click on it. Haven't tried in other browsers.
David Hellmann 27 Jan, 2009

I use it and its really nice. thx for it!
cssglobe 27 Jan, 2009

I will definitely have a fix for nested content. You can expect that soon, before next version comes out. I will post a fix here.
Markus 27 Jan, 2009

nice plugin
like it
SSV 27 Jan, 2009

Nice plugin, i really enjoy it. Is it possible to link to slide number X in the controls? So, if i have 10 slides, the user can choose to go to slide #7 immediately instead of sliding trough the first six slides.
Rob 27 Jan, 2009

Great work! I am trying to have both arrows left and right show like in this option "styled demo with default settings". I tried adding "controlsFade: false". Is there a way to have left and right arrows always appear?

Thanks alot
Jamie 27 Jan, 2009

Beautiful work! I can't wait to get the flash off my site and swap this for the current banner. Thanks!
Odin Horthe Omdalt 27 Jan, 2009

I might use this on a Norwegian student newspaper. I've really liked the slider on http://whitehouse.gov/

But it's kinda crucial that autoslide stops when you hold your mouse over the content area.

And, OK, it's called slider, but fading is also very nice ;-)
David 27 Jan, 2009

I love you.
Geoserv 28 Jan, 2009

STUMBLED!

This is fantastic Thanks for sharing.
Nathan Eshraghi 28 Jan, 2009

nice plugin, i especially like that it has a vertical option.

My only question is does it have other navigation option. Rather than having next and previous and last, having like Home About and Contact. I haven't really taken a good look at it but does it have this functionality (ie like the codaslider).
Fabio 28 Jan, 2009

awesome, i am about to launch my website and will surely make good use of it!
there is only one feature that will make it 5 stars + instead of 5 stars, imho: is it possible to have in the first frame just the "next" button, without the "previous"?
anyway, it is perfect even this way, many thanks
Rich 28 Jan, 2009

I so needed this. thanks for sharing.
E11World 28 Jan, 2009

Very very well done! I love this and can't wait to see future versions!
fatherb 28 Jan, 2009

just phenomenal script. thanks very much.

think it has been mentioned above, but any chance of having an option to have numbers in the main window so people can choose which screen to go to instead of the left and right buttons.

and of course it would be nice if the rotation continued after a set time as it stops now once a button is pressed.
WB 28 Jan, 2009

Great script. Quick question though...is it possible to have descriptive text directly under or part of each slide? I'd like to use this on my portfolio site to include my work followed by a description of that work.
Max 29 Jan, 2009

Nice upgrade.

One thing I notice: the prev button does not always appear when it should like it does in Firefox?
joseph 29 Jan, 2009

Firefox 3.0.5 = no problem
Opera 9.63 = no problem
IE 7 = no problem
Safari 3.2.1 = btn_next & btn_prev images dissapear
Chrome 1.0.154.43 = btn_next & btn_prev images dissapear
joseph 29 Jan, 2009

Flock 2.0.3 = no problem
Netscape 9.0.0.6 (don't laugh:) = no problem
Max 29 Jan, 2009

My favorite is the 02.html version. It adds the styling groundwork to create different nav button graphics. Very cool!

But there is a definite issue here with Safari though: missing buttons. I have never tried using Chrome but it sounds like the same issue exits as well. Hopefully there will be a 1.5X fix to tweak this into shape?
cssglobe 29 Jan, 2009

Thanks for the comments and suggestions guys! I will definitely have a look about Safari and Chrome issues and post the fixes here.
ah66533 29 Jan, 2009

I am using IETester to test different IE versions..

IE6 -> works
IE7 -> works
IE8 (beta2) -> does not work

With IE8 the main content is now changing. The main view is visible all the time. Buttons works just like they should (next button disappears at last slide).

This might be IETester problem...
dario-g 29 Jan, 2009

Great work. I'm think about using it on my site softio.pl but I decided to use different script becouse of lack events and slide selectors.

If You decide to implement this functions I think about your script again :)

Thanks for sharing
Rich 29 Jan, 2009

How do you preload images when you ctrl+F5 on this example a few times you get the images down the page?
http://cssglobe.com/lab/easyslider1.5/03.html
Lluria 29 Jan, 2009

How can I wrap all the slide images so that in Dreamweaver's 'Design' section all the images do not appear under the first image.

I just want the first image to be shown in dreamweaver? it kinda messes up the tables. If you know the solution please help.
kesc 29 Jan, 2009

Works perfect in IE8 RC1.
kuba 29 Jan, 2009

is any way I can create numbers or thumbnails below related to specific image instead using only arrows?
Geoff 30 Jan, 2009

Hello Alen,
Fantastic script, really really good, one question however is it possible for the animation rather than scrolling back to the initial image simply carry on..?

so...
[animation sequence scroll to start]
1 > 2 > 3> 4> 5> <scroll> 1 > 2 > 3> 4> 5<scroll>

becomes..
[animation sequence no scroll]
1 > 2 > 3> 4> 5> 1 > 2 > 3> 4> 5>

If so can anyone provide me to code?

Regards

Geoff.
Rodney 30 Jan, 2009

Hi, Thanks a lot for the help again. Really digging this. just wanna pose another challenge to you and anyone else who can help..... can this plugin help in creating the slider navigation seen @
www.deviantart.com?
Nicolas Borda 30 Jan, 2009

@cssglobe Hey just dropping back to see if there was any progress in the fix for nested item, I desperately need it. If you can give me a hint as to what needs to change I can give it a go over the weekend, I'm a beginner in jQuery but always willing to learn new stuff. Please let me know your plans as to when this will be fixed, and if its a priority. Thanks so much again for your awesome plugin, I'm ldoing a list on my favorite jQuery plugins and you can be sure this will be nearly at the top of the list! Cheers!
Drew 30 Jan, 2009

I really like the new version of Easy Slider. Thanks for making a great plugin
slickboyj 30 Jan, 2009

Can I use .png images with this script?
Garrett 31 Jan, 2009

I am also having problems with safari and chrome. When I hit next it scrolls through all the items at once to the end of my list.

On the other hand I have to say as well that this script is very impressive. Great job.
psyhonut 31 Jan, 2009

http://pusku.info/portfolio/ - tnx for plugin.
Michal 2 Feb, 2009

would it be posible to create a block with multiple sliders, then when a press a link the one slider scrolls and the oterhone scrolls to but with a delay of lets say 10seconds?
inosense 2 Feb, 2009

Excellent slider script. I will use it on my new portfolio site and implement it in Joomla!.

A question - if I make a Joomla! extension out of it - how about the credits for using the script?
andrewthong 2 Feb, 2009

Useful plugin, easy to work with! I'd love to see pagination/numbering in future revisions.
Keith 3 Feb, 2009

As Liam Morley and Geoff have also noted, a continuous loop would be a great addition.

i.e. slides moving from 1, 2, 3, 1,... as opposed to "rewinding" 1, 2, 3, 2, 1...
Ben 4 Feb, 2009

I am trying to implement this slider into a page I am working on. I am having a couple main points of "contention"! It seems to work properly in FF, however, if I refresh the page, the browser is adding different widths and heights to the div.slider, and really throwing a wrench into the design. Any ideas why this may happen on refresh?

It doesn't appear to be doing this on my "test page"... http://spinmarkettemplatev3.spintest.com/slider_test.asp

Thank you for any assistance or direction you might be able to provide!
Ben 4 Feb, 2009

The site I am experiencing the issue with that I mentioned in the post above is here.
http://spinmarkettemplatev3.spintest.com/_inside.asp

Not sure why, but in FF, it is appearing to change the class of the div “slider” from 310px wide to 1124px (and also changing the height from 150 to 190).

Thanks again.
Benny Risanto 5 Feb, 2009

Thanks a lot, my next project will inspired of this article..
Ben 5 Feb, 2009

My problem has been resolved. Somehow, moving the slider classes inline into my page (as opposed to referencing them in an external style sheet) corrected the issue. Sorry to clutter up your message board with nonsense! Love the slider now that I have it working!
Jack Boberg 5 Feb, 2009

Great script. Ability to pause on hover, or a stop() and start() that could be bound to events would be very useful.
Sigurbjörn 5 Feb, 2009

Great plugin, thanks ;)

I had one problem where i had only one image in the slider but the next button was displayed regardless.

So I modified line 72 as follows ...

Before:
if(options.controlsShow){

After
if(options.controlsShow && s > 1){ // where s is the <li> count

Best regards...
Andy 5 Feb, 2009

I have to agree that the pause/play button would be a very handy feature indeed. This is all it needs to turn this into the best news slider for jquery ;)

Any tips on how I could go about adding this?

Thanks for a great plugin!!
Ed 6 Feb, 2009

One more vote for a continuous cycle without rewind - thanks!
chris 6 Feb, 2009

Great script though it reduces accessibility, the back and forward button doesn't work, any idea how to add back the back and forward button?
James 7 Feb, 2009

First of all, Outstanding.. I truely am a newbie and have managed to get this script working and customised. Trouble is; being a newbie any deviation from simpleton instructions can send you into a spiralling spell of frustration :)

I'm trying to integrate EasySlider with Photobox and hoping someone can help...
http://www.jamesrouse.com/lifestyle_easyslider.php
that is easy slider working

http://www.jamesrouse.com/lifestyle_photobox.php
that is the photobox working

http://www.jamesrouse.com/lifestyle_both.php
this is 'meant' to be them working in harmony together.

any pointers would be very much appreciated!!
thanks
????? 8 Feb, 2009

thank you this is a usfuel project
Greg 8 Feb, 2009

@cssglobe: Do you have any idea of when you might be releasing the next update?

As far as ideas... you may want to try to incorporate some of the things that <a href="http://www.5bosses.com/examples/agile_carousel/multi_example/carousel.html">this script</a> has.
b 9 Feb, 2009

Great plugin.

The only thing it needs is page numbers under, which link to the slide number and then it could be used for anything really.

Good job.
Stu | selfconclusion.co.uk 9 Feb, 2009

Thanks for this mate! been working on a new portfolio and wanted to incorporate something like this :)
Garrett 10 Feb, 2009

CSSGlobe & Joseph - I discovered the source of my problem with it not working in safari or chrome. I went back to using version 1.2.2 of jquerey instead of 1.3.1 and it fixed the problem. I had been using jquery for more than one feature on my site and found that it fixed a unrelated problem pertaining to a different script as well.
Donna 10 Feb, 2009

Hi, I love this slider, it's wonderful!
I just have one hitch though! I got it working perfectly with two arrows positioned on either side of the box.... and then I resized my window. The arrows stay exactly where they are but my fixed, centred site stays in the centre of the window. How can I position the arrows so that they are fixed to the maincontent div when it moves?

I'm a graphic designer who is a definite newbie on this stuff, learning by trial and error over the past couple of months. Any assistance is appreciated!

Thanks
Donna
mike 10 Feb, 2009

Seconding what everybody said on here, this is one of the best slideshow jquery plugins ever developed. It's simple like it suggests and only takes a few mins to implement. Having said that, does anybody here know how to modify the script a bit so that it only cycles through each list item once and then starts back at the first one (ie. 1 >> 2 >> 3 >> 4 >> etc. >> end >> slide to back to 1, then story)? Any help is much appreciated!

P.S. Can confirm that this works as described in FF2&3, IE7, Opera 9, Safari 3 and Google Chrome 1 on Vista
Stewart Goodwin 10 Feb, 2009

Is it possible to integrate this with the jQuery Easing plugin? If so how?
Vayu 11 Feb, 2009

HI, I wanted it to show 2 images/content at time like several others here have requested. I am using it to run vertically. I quickly looked at the code in the easySlider.js file and changed this line "obj.height(h);" to "obj.height(h*2); " and it seems to work.

The same goes for horizontal views. Just changed this line "obj.width(w);" to "obj.width(w*2);".

I am no jquery/javascript expert and I havent tested it in other browsers than Firefox 3. Can it be that simple?

Cordially
Vayu
Garrett 11 Feb, 2009

Vayu - Yes it can be. I simply placed multiple items inside a div inside the li and as long as the height and width of everything is defined it works great. I acturally crated a few that have just one item in one slide and then several in the next - all inside the same slider:

http://70.96.242.7/~sunstate/restaurant-merchant-accounts.php
fredj 12 Feb, 2009

hy,

just thank you for this useful and light script !

thanks again
Jeff 12 Feb, 2009

I was having the same issue in Safari 3.1 and 3.2 with the Next/Previous buttons disappearing and not reappearing properly. I solved the problem by changing two things:

1) CSS: in the #prevBtn, #nextBtn, #prevBtn2, #nextBtn2, overflow is set to hidden, change this to visable.

2) easySlider1.5.js - prevText and nextText leave blank so there is no text to display. This hurts accessibility, but it solves the problem.
kyle 14 Feb, 2009

This is great, anyone figure out how to implement a continuous loop (no backwards scrolling at the end) like many others have asked above?
Bix 15 Feb, 2009

How can i just go directli to a picture by a GET Link or Javascript or what ever? Nice Job :-) i'm just learning all that :-)
Bix 15 Feb, 2009

in your code i can find (easySlider1.5.js)
html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';

But how can i get directly picture nr. 4 when open the pageview of the slider? Where do i get that Variable from? thats all what is missing and i slowly give up on it. Actually i really dont want to, because its so great :-)
GeraldS 15 Feb, 2009

Very nice script.
I expanded it a little to show the current position in the slide.
If you are interested to add it as an option for the next version:
html += ' <span id="position">'+(t+1)+'/'+(ts+1)+'</span>';
and at the end of the animate() function:
$("#position").text((t+1)+'/'+(ts+1));
Donna 16 Feb, 2009

Has no one else had any issues with a centred fixed website? My arrows won't stay in the same place when the window is resized :(
Any help would be really appreciated!! Thanks, Donna
ravex 16 Feb, 2009

Hi. please help me with adding some effects after slide event...
how add "fade effect" to a #text <div> or <li> inside #slider tag
1. image is sliding
2. after this action i want fadeIn #text in current image
how i can?
Fernando 17 Feb, 2009

Hi. I have a question. How do I add and button (play and pause) to the plugin for sliding images.

I think that this plugin can play the role of this one : http://www.bannerengineering.com/es-MX/

but It doesn't have and play & pause button. Any idea ? please
bix 17 Feb, 2009

Thanks GeraldS, i will try that out, i hope it works.
Oh and if you have different sizes, just put in a table with align=center. put the Buttons padding to the right position, because, bigger container... bigger space between the buttons
Nick 18 Feb, 2009

I am trying to add a counter to this. I want to show what slide you are on and out of how many (1 of 4). Has anyone else done so? Great plugin, so easy to use. Thanks
rahim haji 18 Feb, 2009

as stated by all.... this is a good plugin... well done.

I was wondering if you can help me tweek it slighly.

When at the last image and the next btn is clicked (or on continuous animation), can i get the slider to just scroll to the 1st picture rather then scrolling through them all and then shounf the first slide?

regards,

Rahim
ESP 18 Feb, 2009

Lovely slider! I've tried to add the lightbox (http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm) feature to my slides to display some work, but the jquery file is clashing with the new js files. I have limited js knowledge and wondered if you might know why?

Cheers
Donna 19 Feb, 2009

Hi - I finally fixed my moving buttons and thought I'd post the solution. It's really basic, I'm probably the only one to even have this problem (in my defence I am very much a beginner :)). I just needed to make my maincontent div position=relative. Then my slider div position=absolute. Then voila! perfect :)
Firenza 19 Feb, 2009

Great script. Just the right weight, not at all overfeatured.

Works with jquery 1.2.6 but any chance of a quick fix for jquery 1.3.1 users?

All the best!
Danny 19 Feb, 2009

I would like the Next & previous button on top instead of the bottom... how?

kudos for the script!
Jennae Petersen 19 Feb, 2009

I am completely new to this, so forgive me if my question makes it obvious :) . Where do I put the following lines of code:

$(document).ready(function(){
$("#slider").easySlider();
}); I am completely new to this, so forgive me if my question makes it obvious :) . Where do I put the following lines of code:

$(document).ready(function(){
$("#slider").easySlider();
});
Jennae Petersen 20 Feb, 2009

OK...it looks like I've gotten all the javascript where it's supposed to be and the style sheet set up, but the slider isn't working. It's just displaying my images stacked on top of each other. Someone help!

See it here: http://hibiscuscreative.com
Fransnico 20 Feb, 2009

Great works Alen..
I know this question already asked before..
Is someone already figure out how to make the slide cycling in one loop? 1>2>3>1>2>3....
really need it for my project.. Please help..
Lorne Pike 22 Feb, 2009

Looking forward to playing with this. I like Nick's idea of adding a counter. Would be very helpful when presenting a larger number of images. Overall though, great script. Thanks.
brian 22 Feb, 2009

Would be great to use dynamically loading content (images) rather than needing them all inline?

Thanks
Taylor Regan 23 Feb, 2009

This is fantastic! <<thunderous applause>>
It's just what I was looking for and adds a nice touch to my website.

Thanks!
Jared Crossley 23 Feb, 2009

Great, highly-customizable, light-weight script. Thanks!

A small JS error is showing up in my debugger, related to the JS inserted into the <head>:

<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
});
});
</script>

ControlsAfter: '</p>', is throwing an error, saying that the character "/" isn't allowed. I tried converting it to an HTML entity (⁄) but that didn't work either. Any ideas?

Thanks,
~Jared
Jared Crossley 23 Feb, 2009

Hi again,

I also tried the decimal value & #47; (space added 'cause it looks like the comment system strips out HTML entities). Same problem.

~Jared
GeraldS 23 Feb, 2009

Another addition:

This block right after "$(obj).after(html);" hides the next/previous links when only one list element is present in the list.

if (ts < 1) {
$("a","#"+options.nextId).hide();
$("a","#"+options.lastId).hide();
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
}
Garrett 23 Feb, 2009

Now following CSSGlobe in Twitter. Booya.
Chanie Pritchard 24 Feb, 2009

This is the new slider of choice for us. Excellent work!
Jared Crossley 25 Feb, 2009

@Jared Crossley (me):

I found a solution to the improper rendering of the forward slash '/' in the following line:

controlsAfter: '</p>',

Simply replace '</p>' with '</\p>' -- this will escape the invalid character.

~Jared
John Mac 25 Feb, 2009

Is it possible to make the last one link onto the first one as seen on the http://www.bbc.co.uk/ site ( iplayer section)? Notice how its continious and the last joins the first.

Thanks.
Marc 26 Feb, 2009

Great plug-in! I spent longer then i should have trying to get the scrollTo plug-in to work and finally gave up, found this and had it set up in minutes.
Had same Safari/Chrome issue with disappearing buttons(.png) but found they dont disappear if they are set inside the #slider div. Im not going to change my Jquery back to 2.2 but i will change the #prevBtn and #nextBtn to visible and test that as Jeff suggested.
Marc 26 Feb, 2009

Tested on MAC Opera 9.2 OK and Safari 3.2.1 OK both with button(.png) Divs visible.
Miguel 26 Feb, 2009

How to get the value of "t" outside from function animate(dir,clicked)?

I like to get the current value of t but it doesn't work:
html += '<span id="myid"><a href="images/myimg/'+ t +'.gif" id="btnImg" class="btnImg">My Image</a></span>';
Zend 26 Feb, 2009

Hi Miguel we have same issue, Im new to jquery anyone knows how to do this:
if(options.controlsShow){
var html = options.controlsBefore;
if(options.firstShow) html += '<span id="myid"><a href="images/myimg/'+ t +'.gif" id="btnImg" class="btnImg">My Image</a></span>'; $(obj).after(html);
};
I want to get the value of ( t ) when I click next then suppose to get the next counter 2, 3, 4 .
Any help is greatly appreciated.
Pieter 26 Feb, 2009

Finally found a good use for this.

It's a great and very, very easy to use plugin.
Thanks!!!
Peter 28 Feb, 2009

I have the same issue as Rich. When loading a new page or refreshing with F5 - there is a pause while the image(s) load. Is there anything you can suggest to address this or to better preload the images? I'm not sure exactly what the issue is.
Andreas 2 Mar, 2009

Hello,
Andreas from Germany here. I try to insert the slider in a customer project,
www.adminforyou.de/bd/index.php
but the slider doesn`t work. (the demos work fine). IE7 shows an error message "jQuery" is undefined, line 31, char 1" and a second error message "this object does not support the property or method, line 19, char 4 " (translated from german error message)
what is wrong with my index.php?
Could anyone help me?
Thanks a lot from Germany
Andreas
Andreas 2 Mar, 2009

Hello,
oh, i am sorry! i have found the reason for the bug. The jQuery has to be inserted before the easyslider.js.

Great slider, wonderful!
Andreas
George from Ohio 2 Mar, 2009

First things first, GREAT SCRIPT. It's so clean and easy to use.
So far the only issue I have is that I can't seem to get this script to print the whole ul using the print.css. Did anyone have the same issue as I did? Let me know. Any help would be appreciated. Thanks.
Brian from Minneapolis 3 Mar, 2009

Great script! Super useful. Thanks for sharing. I noticed a display bug when using a SWF in the one of the "panels" where Firefox (only on Windows) won't hide the Flash when its on either side of the slider viewing area. Has anyone come across this and if so, had any luck fixing it.

Ah... browser inconsistencies. Gotta love 'em.
Hesham from Egypt 4 Mar, 2009

Nice Script :)
I've added a paginator to it and some other stuff.
Editing it was very easy.

Keep the good work.
Orlando Bennington 5 Mar, 2009

What a nice script!

I'm just starting with jQuery and that I'll help a lot!

Thank you!
Kevin 5 Mar, 2009

Is there a way to change the position of the next - previous button? Meaning put it on the top rather than the bottom. :)
Ravi Kotak 5 Mar, 2009

I found something that makes it work with loop. http://bogojoker.com/easySlide/
Thanks
christopher Jack 6 Mar, 2009

Thanks so much, that's what I am looking for :D
Benjamin Reid 6 Mar, 2009

@Kevin -

Change XXX to your desired postion

#prevBtn, #nextBtn{ top: XXXpx; }
Bryce 8 Mar, 2009

Thanks for this. Great work!

I have a feature request: Instead of when the auto scroll reaches the last item, going all the way back to the first one just show the first one next (if you get what I mean)

i.e go 1,2,3,1,2,3 not 1,2,3,2,1,2,3
Hase 8 Mar, 2009

excellent script! thank you so much for that!
unfotunately there sems to be aproblem with the wordpress motion theme (http://www.themelab.com/2008/06/23/motion-free-wordpress-theme/) either the accordeon script or the slider script woks. any hel appreciated!
Hase 8 Mar, 2009

and there is some odd behaivour if I try to embed youtube videos. the overflow:hidden doesn't seem to work in this case. is that possible?
works in ie but not ff
Anton 8 Mar, 2009

Hi! Well done!
If you add opportunity add text on pictures, it will be superuniversal plagin!
Johnny 9 Mar, 2009

Hi Excellent Script you got here! just got into a little trouble.
The contents on my slides are pages with bullet lists. This causes problems in away that every bullet list on my contents adds a blank page on the slide so it scrolls with a lot o f blank pages on it. Any fix for that? Many Thanks! Keep up the Good Work!
Stuart Thursby 9 Mar, 2009

Very nice script & effect, will be using this on my site's re-design. A perfect, compact way to present a portfolio of work!
Bokelmann 9 Mar, 2009

how can I jump to a specific sliding-item?
(Button1 for slide 1)
(Button1 for slide 2)
(Button1 for slide 3)
etc?

cheers
Mistral 10 Mar, 2009

Awesome , looking for this for sooo long !!!
Wow , thank you so much for this , you're KING !!!!

Regards,
Mistral
Teebek 11 Mar, 2009

Hi,
Very nice script and simple to use.
I've tried to use it with Yetii script but it seems that it doesn't work. If someone has a solution, I'll take it ;-).

Regards.
chuck 11 Mar, 2009

This slider plugin is awesome, great job, - I have however seen that a number of plugins, like this one, do not work with jQuery 1.3+ - I am trying to figure out what adjustments need made, any input would be apprecaited.
Miguel 12 Mar, 2009

You have really smashed all the other sliding plugins around the internet! Great work.
Florian 12 Mar, 2009

I really like the app. but there are 3 things bothering me.

1st one, in safari on first page load you will see nothing more then 10px of the top of the slide.. after refresh it works just fine.

2nd one, before the whole page is loaded, all of the images are displayed in list order... how can i fix this?

3rd one, w3c validator says:
Line 16, Column 34: document type does not allow element "p" here.
controlsBefore: '<p id="controls">',

Can you mail the answers to me? special Thanks!!
Joa 13 Mar, 2009

Joseph Pecoraro's addition to this already super script with possibility do do the nice loop thing is just awesome!
http://blog.bogojoker.com/2009/01/adding-looping-to-a-content-slider/
wayne 13 Mar, 2009

This is awesome. can the slider able to start from centain slide when i enter the page, for example. start from slide no3. (direct from third thumbnail from previous page) :)
asaaki 14 Mar, 2009

great plugin!
one issue - when I save the demo pages, let's say "styled demo with auto scroll and continuous sliding", the images auto scroll, but the buttons don't work. When I write my own code and use the plugin as per this tutorial, the buttons work but auto scroll doesn't. I've spent hours on this but just can't find out where I'm going wrong. Help!
Nicolas Borda 15 Mar, 2009

Hey @cssglobe, I have the Drupal module in ready, but I can't make a stable release until the nested content problem is fixed. Please let me know if you had any time to work on this. Cheers :)
Martin Miranda 18 Mar, 2009

Awesome, I was just searching something like this

Thank You
kevin 18 Mar, 2009

i seem to get the error

$("#slider") is null

any one know how to get rid of this, i am using aspdotnetstorefront so its in the template on every page but the slider is only on the home page.
naresh 18 Mar, 2009

very good one.
but after it rotates 4 times i want it to loop it agin with smooth.
in your work it is directly starting with first image again,
Maged Makled 19 Mar, 2009

Awesome job with this plugin, I'm trying to make the slide to stop on mouseover and resume on mouseout. I tried

**
$(document).mouseover(function(){

$("#slider").easySlider({
auto: false,
});
});

$(document).mouseout(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
pause: 5000
});
});

**

but not luck. any ideas?

Thanks
sonic22 20 Mar, 2009

Hi,

Great plugin, i really like it, could you try to add a mouseMove function to slide with the mouse position over the #div

Best Regards
Mozes 20 Mar, 2009

Would love to see how they did the one at Bottlenotes.com
mamjed 20 Mar, 2009

how can i change it so it doesn't slide, but fade?
alvaro 23 Mar, 2009

Thaks a lot for this script, as noted before, how turn it to fade between each image?
Gabe 23 Mar, 2009

Thanks for the great plug-in. I used it on my portfolio page - http://greenflipflops.com/samples
Neil 23 Mar, 2009

Great script thanks a lot

One more vote for a continuous scroll; thought 1>2>3>4>1>2>3...
Nebbercracker 23 Mar, 2009

The slider at BottleNotes.com is cool. It has the sub navigation as images/thumbnails. Does anyone know how to do that?
vishal 24 Mar, 2009

Wow!!! Great work! You are providing me with everything I want to know. Al your posts are so resourceful! Keep it coming!
Kaya 24 Mar, 2009

Hi there,
I have the same probme as several people before.
I would like to add a navigation to the slider that points direct to certain container id's within the slider.
Can anyone help please!
Bulat 25 Mar, 2009

Hi!
Please, help me. I need make this slider for full page (width=100%). How I can do this? Thank's.
EngineHere 27 Mar, 2009

Thanks for this plugin !
I'm using it in Wordpress to slide pretty heavy <li> (see in my homepage) and it works nicely.
It took me some time to figure out that I can use controlsFade: false , to make the whole thing more clear to people.

Thanks for sharing !
Hendrik-Jan 27 Mar, 2009

Lovely script. Would love to resolve the issue with nested li becoming slides. Tried to modify the script to the lis become spans but I couldn't get that to work. (I have no understanding of how JS selectes objects in the html.)
Tyler Henson 27 Mar, 2009

@ Colin Scroggins
I agree, it would be great to have the auto scroll resume after using the manual controls.

Also, another thing I've seen is a "bounce" effect when each slide comes in. I think it would be cool to add some fun visual effects like that.

I love how when you get to the end, it scrolls quickly over the previous slides to the first... awesome! Great script nonetheless!!! Thanks for all your hard work on it!!
John Doe 28 Mar, 2009

I'm checking the first demo in IE 6, 7, 8 and it doesn't seem to work. Is anyone else having issues with IE?
Barry 30 Mar, 2009

Excellent work! Kudos. One question, I have a client who wants it to cycle through all the photos and return to the beginning (as it does). BUT then he wants it to stop. Is there a way to do that?

Thanks
zeroday 30 Mar, 2009

will this work on drupal 5.x installation? cuz all the xhtml transitional effect dont work on it...drupal is strict....can anyone shed light on this...please, i really like this plugin
DDamir 30 Mar, 2009

Very nice.
Pozdrav iz Beograda.
kevin 1 Apr, 2009

is there away to add a conditional statement to this eg. if default.asp show slider if not hide.

I am getting an error on ever page its not on becasue it cant find it.
Hakan Folkesson 2 Apr, 2009

Thanks! Great work!
I would like to use this if it would work with nested list items.
Darren Taylor 3 Apr, 2009

Excellent plugin thanks! Would anyone have a working example of one with captions below or overlaid on top of the images?
zarouk 3 Apr, 2009

hi all,

It will be great to have more type of effect like the "ImageSwitch" project for example : http://www.hieu.co.uk/blog/index.php/imageswitch/

Best regards,

PS : sorry for my english, i'm french :)
Garret 3 Apr, 2009

Has anyone got easy slider to work with sifr? I'm having trouble.
jeroen 5 Apr, 2009

Very nice script!

as anybody else I have some questions:
You use a list now, is it possible to make it a div?
(solves the problem as well with putting a list in there)

If It would be possible to change it into a div, could you put in 6 div's standard and change in an external stylesheet for example the last two div's:
#div5, #div6 {
visibility: hidden;
or
display: none;
}

Thank you for this great script!
jeroen 5 Apr, 2009

I tried some things with putting a div inside the list but that won't work.

How can I put an div inside or make it all a div?
magelover 8 Apr, 2009

Hi Thanks for the plugin...but I have problems in Safari and Chrome - the size of the slides is all wrong. In all other browsers shows perfectly...any possible solutions?
irka 8 Apr, 2009

I included this plugin on my website, nice and smooth working on Firefox, Opera and Safari... but i've done the same mistake as always - I didn't check before, if it is working with f... IE. And it doesn't work.. So i checked this demos from this post - don't work on Internet Explorer.. what a pitty :( I really like this plugin, its simply and elegant, but well,, doesn't work with IE. Anyone here, any suggestions:)? thank you anyway, it is still very inspiring slides gallery.
irka 8 Apr, 2009

just checked - this plugin works prefectly on older versions of IE. Doesn't work on the latest (IE8). Internet Explorer sucks as always :/ It shouldn't be never developed (IE), piece of junk, that's it! I can imagine this dozens of plugins which aren't compatibile with this piece of shit (IE). And I can imagine all this hard develpoers work for nothing.
Peter 8 Apr, 2009

If you don't want the images to show up in a list when you refresh the page, add this to your css

#slider { visibility: hidden; }

and add this to you document ready function just before you invoke the slider:

$('#slider').css('visibility','visible');
Joshua 9 Apr, 2009

Great little plugin! Not sure if this is already an option, but a nice addition would be the ability to use multiple images within the viewing area.
ewd 10 Apr, 2009

I would also like to be able to use .png files with this? Any chance?
Eitan 10 Apr, 2009

if i want to stylize the First and Last buttons how would I do that? i want to make them images, just like you did with the next slide and previous slide buttons...Oh also in your next version a page linker thing would be could so you click a button and it goes to a certain page...
David 13 Apr, 2009

really nice plugin [h]
PF 14 Apr, 2009

Hi,

Great script, really love it! Would it be possible to place a link first and last photo somewhere else in the page.

Something like:
Lorem ipsum dolor sit amet, click HERE to view the last image of the slideshow. Lorem ipsum dolor sit amet.

Thanks!
Christopher Scott 14 Apr, 2009

Thanks so much for this plug-in, it's lightweight, effective, powerful, and customizable!! I did have some issues with Webkit, especially mobile safari, but I think i was able to get it working ok now. If anyone's having the same trouble hit me up @christopherscot (only one "t") on twitter, and if I'd be happy to help if I can.

I use it to 'feature' a handful of projects from my portfolio on my homepage, check it out here: http://christopher-scott.com
Franky 15 Apr, 2009

This is great!
osu 16 Apr, 2009

Hi,

Working fine in all browsers except Safari 3.2.1 - overflow:hidden; doesn't seem to restrict the width of the list item meaning the scrolling goes insane.

Tried using an earlier version of JQuery, but same problem. Any ideas what I can try?

Thanks
osu 16 Apr, 2009

A bit more info: It seems this is a Javascript issue because when Javascript is disabled in Safari, the list item width is restricted correctly - not sure what to do from here, can anyone help?
osu 16 Apr, 2009

I found a 'solution' - if you add inline CSS for the widths of each list item (i.e. <li style="width:540px;">Item</li>), then it appears as it should. Is it just me who had this or maybe this could be useful as a change request?

Thanks for the plugin!
sujit kumar 16 Apr, 2009

great script i was just searching for this, with little bit of alteration i made it for multi image slider.
Alexandre Broggio (Brasil) 16 Apr, 2009

Muito legal este script muito topos feitos em flash agora j da pra fazer em jquery facilmente vlw
David Ljunghill 16 Apr, 2009

Great plug-in, thanks!
Concur with a couple of the previous posts - it would be even greater with the possibility to jump directly to a specific slide.
James 16 Apr, 2009

I would also like the ability to have multiple list items shown at once.
rory 17 Apr, 2009

YOU BEAUTY!
I was looking for a tutorial on this for ages, felt my web design was becoming a bit flat recently, so this java treat will bring some fun back to my designs.
Thanks I'll give this a test a the weekend.
sivas 19 Apr, 2009

very good, thank you
Tye 20 Apr, 2009

Did anyone get a fix for Internet Explorer 8" - why do Microsoft even bother.... I wonder if this signals the start of many fixes to existing websites :(
Anselmo Martin 20 Apr, 2009

Good work.
I have tried to work within a Iframe by design requirements (popup window) but there is no way.

Intends to fix it?

Tanks
Christine 21 Apr, 2009

Is there anyway to use nested lists or divs to house not only an image but a caption or description on an overlay? I have tried this and it works fine in Firefox, but in all versions of IE the nested list items are all visible at once and extend off the width of the slider causing horizontal scroll bar.
Jörn 21 Apr, 2009

Hi, really nice plugin! but does it work with the history-plugin too?
Ray 22 Apr, 2009

Hi - this is working really well for me, with one exception. In Safari it loads fine. But, if I move on to another page and then come back using the back button, all I can see is the top 20px or so of the images (all of them). They are still scrolling fine, and the buttons are still intact.

Has anyone come across this?

Cheers - thanks for the plugin too!
jerome 22 Apr, 2009

A solution for a multiple slides (images) at the same time?

Thank a lot
sopheak 23 Apr, 2009

I have been waiting to get it for a while. it's so fantastic job.
Thanks
JR 23 Apr, 2009

Hi, please will you tell me if it is possible to link this to a menu list or as per and earlier request bellow?:
"Bokelmann on 9 Mar, 2009 wrote:
how can I jump to a specific sliding-item?
(Button1 for slide 1)
(Button1 for slide 2)
(Button1 for slide 3)
etc?"

Many thanks for a fantastic piece of work
JR
jerome 23 Apr, 2009

A solution for multiple slides (images) at the same time?

Thanks
andres 26 Apr, 2009

play and pause bottom, that`s a good idea
Al 27 Apr, 2009

your slider is very cool, a numbered pagination will be a really good feature :)
Oliver 28 Apr, 2009

I seem to get a problem when viewing it in IE7. All the <li> elements that im trying to slide through are showing up at the same time. I have tried rolling back to an older version of jquery but it still doesn't show/work properley. Works fine in FireFox though. Any ideas on how to fix this?
jeroen 29 Apr, 2009

wow nice scroller! I'm new to jquery, I used to use mootools. Nice and easy functionality this! One question, I'm using the slider on my site right now (www.ademaweb.nl). On only the first second all images 'blink' underneath eathother, is there a solution for this?
Josemi 30 Apr, 2009

Hello!

First of all i want to thank you the great script!

I have used it in a site and it works great but i am experimenting some problems!
It doesnt works always, its kind of random, somethings works, something not!

Would be great if you could have a look a say to me your ideas because i am getting crazy!

Thanks!
Tihomir Mihaylov 30 Apr, 2009

Hello!
The plugin is great!
There is something that I can't do. When I set auto and continious scrolling, the scrolling is horizontal and not vertical!
Is there something else that I should do?
Dave 1 May, 2009

Having problem. The slider will not scroll and when I ad more than one item it just comes up below it .
Any ideas??
I am using it within a theme written by somebody else if that makes a difference.

thank you
Ivan 4 May, 2009

I couldn't overcome the problems with Safari and Google Chrome so I decided to use this other slideshow: http://sorgalla.com/projects/jcarousel/ it's also a powerful plugin.

Thanks anyway! I'm sure in a different instance it'll work - but for some reason this time didn't want to work...
Chad 4 May, 2009

This plug-in is very useful for a lot of our sites, but people seem to have a problem with it rewinding back to the beginning, I've tried to use the BogoJoker version of your plug-in, but his doesn't work in all browsers where as yours does.

Any help would be greatly appreciated.
F 4 May, 2009

great article! Very easy to understand and customize. Thank you for sharing!

keep up the good work!
xaer8 4 May, 2009

Great plugin. Fully customizable and works in IE too! Thanks for sharing!
Antonio 6 May, 2009

Beautiful effect.
You can make the effect "fade in" and "fade out" alternatively the Slide Left or Right ?

Thanks
Blair Nichols 6 May, 2009

Awesome article, found some others before this one but this plugin seems the best. Thanks.
Bill MacKrell 6 May, 2009

Great article and plug-in. I'm new to javascript & Jquery but been doing web dev and learning CSS for a while now. This helped me jump right in and add an impressive feature on the front page of my site. One question: I am getting a strange behavior in IE8, the script takes a second to run at which point you see all three images in a row down the screen. doesn't do that in any other browser. Is that an IE security script thing? - Thanks again!
miniMAC 6 May, 2009

Hy! Here is a solution for SAFARI and CHROME?

Now called "EasySlider" must be "HardSlider"?

Someone has a solution? CSSglobe???

FIREFOX: OK
I.E.: OK
OPERA: OK
STAINELSS: NOT WORK
jialong 8 May, 2009

Great plugin
Thanks
sivas haber 10 May, 2009

very good
Barton 11 May, 2009

I'll echo the previous statements, brilliant script.

Also, I agree with the Hover pause functionality, then it's there!

Keep it up,

Barton.
Tom tom 11 May, 2009

Sounds like a n00b question, but I checked I have both jquery included and the script in the head and still it loads only one image.
I can still see all the other images in the source but no slider.
Any ideas what can it be?
Paul 12 May, 2009

Hi

Yes the script works brilliantly except I get a all images appearing a moment before load. So I put height on UL container which fixes it but now is JavaScript is off, you can only see one image.

Is it possible to have a 'next' and 'previous' link when JavaScript is turned off?

Thanks
noisebleed 13 May, 2009

Is there a way to identify the current visible element? I'm using this plugin as an image selector, so I need to know which image/element the user is viewing so I can save his preference.
Phillip 14 May, 2009

Do you have a plugin that will loop around several divs with a show hide method for each div? I'm trying to get this code to do that but I'm at a loss.

Thanks
jostill 15 May, 2009

Can anybody help me with an issue with my site. It's working fine in Safari and Firefox but in IE the images just appear in one long line. I need this to work for Sunday as it's for my degree. Probably something simple with code but I'm stuck.
Be grateful for some advice.

http://www.andywood.co.uk/jo/enzo
jocuri 15 May, 2009

I try to put buttons but not still working...

I put link buttons in <div id="slider">:
<span id="prevId"><a href="javascript:void(0);">Previous</a></span>
<span id="nextBtn"><a href="javascript:void(0);">Next</a></span>
but on click not working :|. Thanks
Tom 15 May, 2009

Really good one. But I'm having problems implementing this into my site. Prev/Next button somehow disappeared.
Xth 16 May, 2009

Thx for the script.. :">
Thifu 17 May, 2009

Nice job... I slightly modified the script to include a callback function, with the slide we come from and the slide we go to as arguments :
// default configuration properties
var defaults = {
esCallback: function(thet, thets){},
...
}
... then we add the following line to a.nextId.click() and a.prevId.click() :
options.esCallback(t, ts);

That's for the script. Then in my Php/HTML page, I call EasySlider the following way :
$(".myslideshow-content").easySlider(
{
// My callback function :
esCallback: function(n, nmax)
{
alert('Slide '+(n+1)+' out of '+(nmax+1));
}
});
Here it is ! After the user clicks a "Previous" or "Next" button, my callback function is called and my website can react to the change.
Thanks a lot for the script anyway !
(if anyone needs the modified version of the script, maybe I can upload it somewhere...)
Nagavardhan 17 May, 2009

Hi, Thx for gr8 script. Its working fine in IE7+ but in IE6 its not working properly. Please suggest any. Follow the below link
http://boulderfirst.com/test/olafe
jeroen 18 May, 2009

is it possible to get 'dots' underneath the slider, that correspond to the slides? So 4 dots: when I press dot 1 I go to slide 1? tnx for the great work!
Frank Patterson 18 May, 2009

I'm building a form using EasySlider 1.5 - is there a way to trigger the action by tabbing to a field with an ID or Class? Here's the page in question:

http://www.fordpas.org/registration/teachers_coordinators/form_v2.asp
jgjax 18 May, 2009

In Safari, my next arrow shows...but does not trigger slide action. Can anyone help please???

Yes, I'm new to this also.

Thanks.
nicolas 19 May, 2009

Muy bueno, la verdad qeu se agradece!!
safe as milk 19 May, 2009

thanks for this plugin

anyone worked out this yet?

"how can I jump to a specific sliding-item?
(Button1 for slide 1)
(Button1 for slide 2)
(Button1 for slide 3)
etc?"

would be perfect
sudeep 19 May, 2009

Thank you so much for the great slider.
sudeep 19 May, 2009

Thank you so much for the great slider.
Steve 19 May, 2009

Hi guys, after tinkering with the slider I seem to have found a fix for the Google chrome issue where the buttons seem to disappear. In the css file that contains the slider's styles, remove the whole section/style for image */replacement, if you test your slider, you should notice that the buttons are appearing normally in Firefox, I.E and chrome, but the button text is appearing above it. Open the js file easySlider1.5.js and remove the nextText: 'Next' so that its only nextText: '' with nothing in the quotation marks, save your file, test your slider, you will notice that the text has disappeared but there is now a blue blue bounding box around it in firefox, open up the css file that contains the stlyes for the slider and insert outline:none; into the stlyes for #prevBtn, #nextBtn{ + #nextBtn{ + #prevBtn a, #nextBtn a{ + #nextBtn a{ , this seemed to solve the issue.
Steve 19 May, 2009

I forgot to mention, do the same for the previousText aswell in the js file :P
Jon 19 May, 2009

First of all great code. Simple, lite.
I wanted to have the auto stop when you clicked on the slider so I added:

$("#slider").click(function(){
animate("stop",true);
});
around line 94
and:
if(options.auto && dir=="stop" && !clicked){;
timeout = setTimeout(function(){
animate("next",false);
},options.pause);
};

around line 156
Erik Wallace 20 May, 2009

Beautiful, thanks for sharing Alen. Along with a few other people I'd love to see pagination included in the future, please contact me if you choose to do so.

Apparently Hesham from Egypt added pagination, I wish I was that savvy with Javascript. Alas, I am not quite there yet.
Amit Dixit 20 May, 2009

Hi Allen,

first od all , Nice slider you built there,
ok, i have a bug in IE7,
inside the <li> tag i have a <div> with FLOAT:LEFT;
this works perfect in Mozilla , Chrome and Safari but not in IE 7
in IE 7 all the slider <li> tags are visible throughout the slider
Can you tell me why this happens ?
Markus 20 May, 2009

Great slider, very simple and very usefull!
Thx for sharing ;-)
Fred 21 May, 2009

Great work. It's people like you who keep us in a job.
I have one question, can I call the next div or prev div programtically instead of a button click.

Regards,
Fred
will jaspers 21 May, 2009

There is a bug.
If the list-item height and width styles are not defined, and continuous mode is true, the slider overshoots the last item -- or the last item doesn't appear at all.
I can't tell if the slider is starting from the wrong position or if it is simply mis-calculating something.
The problem only seems to apply to Mozilla browsers (non-IE).

I can't tell you how much I appreciate this plug-in though!
It is smooth, lightweight, and easy to install!
red india 21 May, 2009

For those having problems with Internet Explorer where the content lines up all in a row to the right, and the overflow is not hiding, you may want to check the attributes you have assigned to your <a> tags. I've noticed this problem with some CSS frameworks like Blueprint. Make sure your anchor tags are assigned position:static.
Cody 22 May, 2009

I have a better way to implement the controls here that allows much better customization, and placement of the controls anywhere on the page.

Comment out these lines in easySlider.js
/*html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';*/
/*html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';*/

Now, add the controls directly within the page layout wherever you like. For example:

<div style="float:left;"><span id="prevBtn"><a href="javascript:void(0);"></a></span></div>

<div id="slider">
<ul>
<li>Contents for slider here</li>
</ul>

<div style="float:left;"><span id="nextBtn"><a href="javascript:void(0);"></a></span></div>
</div>
akitae 23 May, 2009

Is it possible to place a horizontal slider as a item of a vertical one?
dlv 24 May, 2009

really great, thanks you Alen !!

also i want to fade in/out instead sliding...so i'm gonna wait until someone show us how we can do that

adeux!
Alberto 24 May, 2009

First of all congratulations.
This is my web site and I'm having some problems implementing your slide. It works perfectly off line... but when I upload my website on the server it goes really wrong. Any help? Thanks.
Alberto 24 May, 2009

First of all congratulations.
This is my web site www.ciao-caio.com and I'm having some problems implementing your slide. It works perfectly off line... but when I upload my website on the server it goes really wrong. Any help? Thanks.
tom 25 May, 2009

how to get rid of queuing slides??

thx
Candace Haynes 25 May, 2009

I bet its probably simple to combine but my mind can't grasp the ways of javascript/jquery therefore it is beyond me... but I believe you should implement an option that has this effect (captions) with this plugin. These two scripts along with a blender (to combine them) would be exactly what I want for my website lol

Example below...
http://buildinternet.com/live/boxes/
Ismael 25 May, 2009

I'd like the feature that disables the rewind function and restart the animation in the beggining.
Is that possible?
William 25 May, 2009

thank you for a great plugin :-) (i use it on my new site)!
Candace 26 May, 2009

I played around with this script and the one I referenced earlier two posts ago and I got it to work... very nice if you ask me. Except the caption appears on page load until you hover over and then acts as though I desired it too...

http://rapidshare.com/files/237262818/easysliderwcaptions.zip
Candace 26 May, 2009

Oh and I posted because I am hoping someone will fix it :(

Probably simple but I am frustrated now...
Joe 26 May, 2009

This is for images not content.

This is really an image slider not a content slider. HTML elements added inside the LI tags used by the slider causes blank slides to be added. Each slide can only contain 1 image and 1 link.

Content sliders allow you to add html/xhtml content to the slides.

Unfortunately, I got this setup and created my slides before realizing this was image only :) I had 4 content slides followed by about 20 blank slides.
Joe 27 May, 2009

In regards to my last comment, this does work with some XHTML content. I look out some DIV tags and another UL and my content works for the most part.
Alexandre 28 May, 2009

First of all congratulations. I realy like this plugin, but it seams doesn't work on IE 8...
Juan Manuel 29 May, 2009

Excelent !!!
cleverkid 29 May, 2009

Concerning the question of being able to place list inside the slider without the script reading this as something to scroll, I think I have found a solution. Haven't implemented it yet in my production site I am working on, but I was able to get the demo to work by giving the containing ul a class name ie: ul.slideme and then changing the script to look for that class name.
this.each(function() {
var obj = $(this);
var s = $("li.slideme", obj).length;
var w = $("li.slideme.", obj).width();
var h = $("li.slideme", obj).height();
obj.width(w);
obj.height(h);
obj.css("overflow","hidden");
var ts = s-1;
var t = 0;
$("ul", obj).css('width',s*w);
if(!options.vertical) $("li.slideme", obj).css('float','left');

I'll report back if I find any issue with it, but so far so good. Hope this helps some folks.
cleverkid 29 May, 2009

from my previous post, let me amend that. you should give the containing li the class, not the ul ie: li.slideme

sorry about that
xchcl 30 May, 2009

hey, it s complicated! i can deal with it, can u help me??
jsssc 30 May, 2009

excellent plugin
thx for sharing ……
i have translate it into chinese http://jsssc.cn
i wondering will u add more beautiful animating effect on next release
tax 30 May, 2009

Thanks for that great and useful plugin.
Is there a way to click on a link and go to a specific slide?
thai 31 May, 2009

In the styled version, one feature that would be nice would be an alternate image for the next button when you get to the last image. Like a faded or grayed out button. Great work..thanks.
Ankit Sabharwal 31 May, 2009

nice plugin ! serves the purpose in an excellent way
Mike Centola 31 May, 2009

Great Plugin! Very easy to set up and configure. One suggestion for a future version, and I'm assuming that it's pretty simple to do... the ability to adjust the speed of the return to the first slide when using continuous. I would imagine it is pretty easy to modify the plugin code to do this, but I wanted to let you know. Again great job and thanks!
Vassilis Mastorostergios 2 Jun, 2009

Perfect job, I just used your plugin in one of my sites and thought I'd say a big thank you. Keep up the great work.
Prashant Khanal 2 Jun, 2009

This is very useful stuff.

I am using this plugin to show the text content loaded from the database. Is there any way that the component will adjust its height based on the text content being loaded on each slide.

Currently the height of the component to hold the content seems to be fixed which can cause the content being clipped depending on its length.
Sedat Kumcu 3 Jun, 2009

Thanks man. Great plug-in. It's super!
level23design 3 Jun, 2009

This is a great plugin! Just what I was looking for on this one site I am working on!
JC 3 Jun, 2009

Great plugin. Another vote for continuous sliding (e.g.: 1 > 2 > 3 > 1 > 2...)

Does anyone know how to make this happen?
jan korbel 3 Jun, 2009

Need to pause the animation on hover?

Try inserting this on around line 96, right before function animate(dir,clicked)...

$('#slider').hover(
function()
{
animate("stop",true);
},
function()
{
animate("stop",false);
}
);

Then insert this on line 176, right after
... },diff*options.speed+options.pause);...

if(options.auto && dir=="stop" && !clicked){;
timeout = setTimeout(function(){
animate("next",false);
},options.pause);
};

Probably not clean code at all, as I am no pro, but it works.
Tom 4 Jun, 2009

Just a quick thanks to say I really appreciate the plugin - very easy to use.

I've implemented it on a Ning powered site no problem. It's been getting great feedback from users.

http://www.aclimateforchange.org/

Thanks for your great plugin!
Carsten 4 Jun, 2009

@Nicolas
I had the same problem.
my nested divs made the last slidy empty, so i had to add an empty li-element on at the end to show all content.
To hide the Next Button at that las and empty slide i just changed
if(t==ts){
$("a","#"+options.nextId).hide(); $("a","#"+options.lastId).hide();
to
if(t==(ts -1)){
$("a","#"+options.nextId).hide(); $("a","#"+options.lastId).hide();

that worked for me...just a hack, but working....

hope that can fix your issues, too!

Carsten
Kelli 9 Jun, 2009

This is great, thanks for posting all the options. I was wondering if there is a control for the slideshow to only go from left to right instead of right to left?

Thanks, Kelli
sivas 10 Jun, 2009

very good, thank you
Michele 10 Jun, 2009

I try multiple slide and it works... great job for this script.. thanks
Ismael 11 Jun, 2009

Lovely plugin!!

Would like to rewind at the beggining feature.

You know how are the clients. =/
vlp 11 Jun, 2009

beautiful plugin, thanks a lot. I just tried to update jquery javascript and v1.5 stop working. Any possible updates to your library to work with newest version of jquery?
countocram 11 Jun, 2009

very nice! I was impressed!
Jeff L 11 Jun, 2009

Great plugin.

One bit of feedback. If you don't have continuous set to true, and don't have controlsFade set to false, you end up with visible controls at the start and end of the slider that do nothing.

I'd recommend adding this code to at least set a class on those controls so they can be styled to look disabled.

<code>
if (!options.controlsFade) {
if(t==ts){
$("a","#"+options.nextId).addClass('disabled');
$("a","#"+options.lastId).addClass('disabled');
} else {
$("a","#"+options.nextId).removeClass('disabled');
$("a","#"+options.lastId).removeClass('disabled');
};
if(t==0){
$("a","#"+options.prevId).addClass('disabled');
$("a","#"+options.firstId).addClass('disabled');
} else {
$("a","#"+options.prevId).removeClass('disabled');
$("a","#"+options.firstId).removeClass('disabled');
};
}
</code>

I added that at line 147.
Other than that, it worked great for me.
moshe 11 Jun, 2009

to the kind fols who shared the stop-on-hover code: i am getting an error about 'dir' being undefined.

also - is there a way to have a 'stop' (or pause...) button for this?

Thanks for this great script!
sp 12 Jun, 2009

i love this plugin. nice clean work. thank you
Ryan Furtner 13 Jun, 2009

Im working on a word press theme and i need to add next/prev buttons to EACH SLIDE. I have been able to do this commenting out the javascript that adds the spans and adding them myself HOWEVER only the first buttons work. Why cant i have multiple next and previous buttons?

http://www.furtzdesigns.com/multitheme/

That is the site im working on and i cant work out why it wont work!
Ryan Furtner 13 Jun, 2009

Sorry just fixed that by using classes rather than ID's! Although I still have one problem, in IE i have noticed that you click through the slides a small 10-20px gap gets added to each li resulting in each slide being positioned lower as you move further through the slides. I cant work it out if anyone can offer some insight.
adam 13 Jun, 2009

Ive got it working on everything apart from safari cant workout for the life of me why it wont check it out here I uses 22 on one single page for my portfolio section, works great but not in SAFARI. The next and previous buttons appear but just dont work when clicked and it seems the autoplay function is disabled

http://www.adamatkinson.co.uk
Dgwp 14 Jun, 2009

Hi all.
I´m trying to get endless animation, as well as is describe above, but it is not working, anybody can help me?
Jonathan 15 Jun, 2009

@adam

If you figure it out please let me know because I am having the same problem. The Prev and Next buttons don't do anything when they are clicked on.
Jonathan 15 Jun, 2009

Oh, I tried to use the JQuery 1.2.2 like someone stated above but it didn't work. There is not functionality in Chrome or Safari. Can somebody please help?
Adam 16 Jun, 2009

@jonathan

Yea if i figure it out I will certainly publish on here

regards
Courtney 16 Jun, 2009

Can't get my buttons to work, and the slide automatically starts with the third slide, not the first. Any ideas? I'm brand new to jQuery. Thanks!

http://www.truenorthe.com/bright/home.html
Mathew Smith 16 Jun, 2009

Has anyone got a version working with a caption under the slideshow that changes with each advance? Thanks!
Hélio Correia 17 Jun, 2009

Patch for numbered pagination:

01. Edit easySlider.js

02. Add new defaults value

var defaults = { ... pagination: '#pag a', .... }

03. Add new event for pages items:

$(options.pagination).each(function(i){
$(this).bind('click', i, function(e){
e.preventDefault();
if (i > t || i < t) {
t = i;
animate('none', true);
}
});
});

04. Add new markup:

<ul id="pag">
<li><a href="#">Slide nr. 1</a></li>
<li><a href="#">02</a></li>
<ul>
Hélio Correia 17 Jun, 2009

Sorry... my last hack has a bug

Item 03 (FIX):

$(options.pagination).each(function(i){
$(this).bind('click', i, function(e){
e.preventDefault();
if (i > t) {
t = i-1;
animate('next', true);
}
else if (i < t) {
t = i+1;
animate('prev', true);
}
});
});
Verona 17 Jun, 2009

This is a really lovely solution, thank you.

I have a few feature requests for further revisions! :)

A play/pause for the autoslide would be outstanding.
A thumbnail listing would also be ace. Clicking the thumb swaps the main slide and sliding continues from that point.
Cheers!
okey 17 Jun, 2009

Hey Thanx bunch, great slider u got there...
manchurr 18 Jun, 2009

Anyone know how to solve Safari issue here.. firefox n IE works great.. help me plz..

thanks.
Paul 18 Jun, 2009

Is there a way to set a cookie to remember which slide the user is currently on, so in case the user navigates away from the page and then back to it?
Kerr McHale 18 Jun, 2009

Thanks so much for this lovely little script. So simple.

I'm using multiple instances on one page, so one little change I made to the script, that might be worth considering if you release future versions is to include a "class name" variable for the Previous and Next buttons. In a use like mine, where there are multiple sliders, each with the same styling, it's much more efficient to just style one class that applies to all of them, rather than having to specify each separate ID each time a new instance is added.

Even so, this is the only script that even came close to ease of use with multiple instances. ThanksQ!
Dima 19 Jun, 2009

How to place 2,3,4 slider on one page?
Thanks
Pierre 21 Jun, 2009

Hya, such a great job you've done! :)
Thanks a lot!!

I have a suggestion : currently when the parameter is set to true, the behaviour of sliding is :
pic1 -> pause -> pic2 -> pause -> pic3 -> pause -> pic2 -> pic1 -> pause -> pic2 -> pause -> ....

It would be great to add a "Pause" on Pic2 when sliding is getting back to pic1 from pic3 :-)
Michael 22 Jun, 2009

As mentioned above when I upload onto my server this plugin does not function correctly. I of course am viewing it in the same brower, totally stumped here. I tried clearing my firefox data/history out already, please help :)
Michael 22 Jun, 2009

Update: FIX

When I move my stylesheet to internal vs referencing it in an external file every thing works fine. Anyone know a way around this?
Dima 22 Jun, 2009

Kerr McHale
http://www.position-absolute.com/creation/slideshow/
Danish 22 Jun, 2009

Great job!

Truly tremendous, I really respect your work and love this plugin

thank you for sharing this...
Tom 23 Jun, 2009

Also having issues with IE 8. Buttons disappear each time they are clicked, effectively making the script only be able to go left once and right once.
Hassel 24 Jun, 2009

Hey, anyone tested with Firefox 3.5?
I tested a basic slider and dont work...
Yanxerip 24 Jun, 2009

I love your job.. Thxs for share. From yanzen in Indonesia. GBU
Ellis Benus 24 Jun, 2009

This is a great little plugin. However, if JavaScript is off, the the whole list of pictures shows up.

I wrote a little function and just added a body onload call...

Hopefully you will add this functionality in the future without my clunky way of doing it.

put anywhere in the easySlider1.5.jpg
/*
* if javascript is not enabled only
* the first image in the list will appear
*/
function showAllImgs() {
var obj=document.getElementsByTagName('li'), o, i=0;
while( o = obj[i++] ) {
o.style.display='block';
} // end while
} // end showAllImgs

put in HTML

<body onLoad="showAllImgs();">
Matt van Wyk 24 Jun, 2009

For the basic text controls I added a div wrapper around the spans so it could be more easily styled. Perhaps a worthwhile addition for you to consider? Thanks for the nice script!
jocuri noi 26 Jun, 2009

Hi, is there some update in the future?
Sam 26 Jun, 2009

Sweet jQuery plugin, was very easy to incorporate.
BrandonSetter 26 Jun, 2009

I there any way to go from left to right instead of right to left?
Patz 27 Jun, 2009

Hey guys, scanning through the comments and see loads of people asking about continuous scroll.

Check this one -
http://bogojoker.com/easySlide/
It doesn't 'rewind' at the end...
satish borkar 30 Jun, 2009

nice script ha ha ha................

thanks
Ellis Benus 30 Jun, 2009

I am having the same issue as ESP on 18 Feb, 2009 wrote:

Lightbox conflicts with easySlider 1.5 because of jQuery.
(http://www.zimmerinteractive.com/tempdeucepub)

I looking into the jQuery.noConflict option, but it does not work.

Help.
DynaGirl 1 Jul, 2009

Thanks for this very easy solution! Question? Anyone know how to center the images that I'm using within my div? Seems to align to the top/left.

Sorry, further comments are disabled for this post.

CSS Globe is a web design magazine brought to you by Alen Grakalic and kept fresh with member contributed news and exlusive articles.

Css Globe CSS and Web Design News