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

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

Click here for the new version of this plugin

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:

cssglobe's image 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.

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

Comments

Sérgio Soaes on 26 Jan, 2009 wrote:

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

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 on 26 Jan, 2009 wrote:

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 on 26 Jan, 2009 wrote:

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 on 26 Jan, 2009 wrote:

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 on 26 Jan, 2009 wrote:

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

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. on 26 Jan, 2009 wrote:

mega. Outstanding job.

Nice demos.
alain on 27 Jan, 2009 wrote:

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 on 27 Jan, 2009 wrote:

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 on 27 Jan, 2009 wrote:

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

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

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 on 27 Jan, 2009 wrote:

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 on 27 Jan, 2009 wrote:

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 on 27 Jan, 2009 wrote:

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

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 on 27 Jan, 2009 wrote:

nice plugin
like it
SSV on 27 Jan, 2009 wrote:

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 on 27 Jan, 2009 wrote:

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 on 27 Jan, 2009 wrote:

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

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 on 27 Jan, 2009 wrote:

I love you.
Geoserv on 28 Jan, 2009 wrote:

STUMBLED!

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

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 on 28 Jan, 2009 wrote:

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 on 28 Jan, 2009 wrote:

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

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

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 on 28 Jan, 2009 wrote:

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 on 29 Jan, 2009 wrote:

Nice upgrade.

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

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 on 29 Jan, 2009 wrote:

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

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 on 29 Jan, 2009 wrote:

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

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 on 29 Jan, 2009 wrote:

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 on 29 Jan, 2009 wrote:

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 on 29 Jan, 2009 wrote:

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 on 29 Jan, 2009 wrote:

Works perfect in IE8 RC1.
kuba on 29 Jan, 2009 wrote:

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

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 on 30 Jan, 2009 wrote:

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 on 30 Jan, 2009 wrote:

@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 on 30 Jan, 2009 wrote:

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

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

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 on 31 Jan, 2009 wrote:

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

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 on 2 Feb, 2009 wrote:

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 on 2 Feb, 2009 wrote:

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

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 on 4 Feb, 2009 wrote:

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 on 4 Feb, 2009 wrote:

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 on 5 Feb, 2009 wrote:

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

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 on 5 Feb, 2009 wrote:

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

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 on 5 Feb, 2009 wrote:

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 on 6 Feb, 2009 wrote:

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

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 on 7 Feb, 2009 wrote:

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
????? on 8 Feb, 2009 wrote:

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

@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 on 9 Feb, 2009 wrote:

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 on 9 Feb, 2009 wrote:

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

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 on 10 Feb, 2009 wrote:

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 on 10 Feb, 2009 wrote:

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 on 10 Feb, 2009 wrote:

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

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 on 11 Feb, 2009 wrote:

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 on 12 Feb, 2009 wrote:

hy,

just thank you for this useful and light script !

thanks again
Jeff on 12 Feb, 2009 wrote:

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 on 14 Feb, 2009 wrote:

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 on 15 Feb, 2009 wrote:

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 on 15 Feb, 2009 wrote:

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 on 15 Feb, 2009 wrote:

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 on 16 Feb, 2009 wrote:

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 on 16 Feb, 2009 wrote:

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 on 17 Feb, 2009 wrote:

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 on 17 Feb, 2009 wrote:

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 on 18 Feb, 2009 wrote:

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 on 18 Feb, 2009 wrote:

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 on 18 Feb, 2009 wrote:

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 on 19 Feb, 2009 wrote:

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 on 19 Feb, 2009 wrote:

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 on 19 Feb, 2009 wrote:

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

kudos for the script!
Jennae Petersen on 19 Feb, 2009 wrote:

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 on 20 Feb, 2009 wrote:

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 on 20 Feb, 2009 wrote:

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 on 22 Feb, 2009 wrote:

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 on 22 Feb, 2009 wrote:

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

Thanks
Taylor Regan on 23 Feb, 2009 wrote:

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

Thanks!
Jared Crossley on 23 Feb, 2009 wrote:

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 on 23 Feb, 2009 wrote:

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 on 23 Feb, 2009 wrote:

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 on 23 Feb, 2009 wrote:

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

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

@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 on 25 Feb, 2009 wrote:

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 on 26 Feb, 2009 wrote:

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 on 26 Feb, 2009 wrote:

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

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 on 26 Feb, 2009 wrote:

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 on 26 Feb, 2009 wrote:

Finally found a good use for this.

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

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 on 2 Mar, 2009 wrote:

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 on 2 Mar, 2009 wrote:

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 on 2 Mar, 2009 wrote:

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 on 3 Mar, 2009 wrote:

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 on 4 Mar, 2009 wrote:

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

Keep the good work.
Orlando Bennington on 5 Mar, 2009 wrote:

What a nice script!

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

Thank you!
Kevin on 5 Mar, 2009 wrote:

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 on 5 Mar, 2009 wrote:

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

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

@Kevin -

Change XXX to your desired postion

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

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 on 8 Mar, 2009 wrote:

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 on 8 Mar, 2009 wrote:

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 on 8 Mar, 2009 wrote:

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

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 on 9 Mar, 2009 wrote:

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 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?

cheers
Mistral on 10 Mar, 2009 wrote:

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

Regards,
Mistral
Teebek on 11 Mar, 2009 wrote:

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 on 11 Mar, 2009 wrote:

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 on 12 Mar, 2009 wrote:

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

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 on 13 Mar, 2009 wrote:

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 on 13 Mar, 2009 wrote:

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 on 14 Mar, 2009 wrote:

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 on 15 Mar, 2009 wrote:

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 on 18 Mar, 2009 wrote:

Awesome, I was just searching something like this

Thank You
kevin on 18 Mar, 2009 wrote:

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 on 18 Mar, 2009 wrote:

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 on 19 Mar, 2009 wrote:

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 on 20 Mar, 2009 wrote:

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 on 20 Mar, 2009 wrote:

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

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

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

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

Great script thanks a lot

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

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

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

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 on 25 Mar, 2009 wrote:

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

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 on 27 Mar, 2009 wrote:

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 on 27 Mar, 2009 wrote:

@ 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 on 28 Mar, 2009 wrote:

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 on 30 Mar, 2009 wrote:

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 on 30 Mar, 2009 wrote:

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 on 30 Mar, 2009 wrote:

Very nice.
Pozdrav iz Beograda.
kevin on 1 Apr, 2009 wrote:

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 on 2 Apr, 2009 wrote:

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

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

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 on 3 Apr, 2009 wrote:

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

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 on 5 Apr, 2009 wrote:

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 on 8 Apr, 2009 wrote:

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 on 8 Apr, 2009 wrote:

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 on 8 Apr, 2009 wrote:

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 on 8 Apr, 2009 wrote:

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 on 9 Apr, 2009 wrote:

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 on 10 Apr, 2009 wrote:

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

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 on 13 Apr, 2009 wrote:

really nice plugin [h]
PF on 14 Apr, 2009 wrote:

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 on 14 Apr, 2009 wrote:

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 on 15 Apr, 2009 wrote:

This is great!
osu on 16 Apr, 2009 wrote:

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 on 16 Apr, 2009 wrote:

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 on 16 Apr, 2009 wrote:

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 on 16 Apr, 2009 wrote:

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

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

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 on 16 Apr, 2009 wrote:

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

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 on 19 Apr, 2009 wrote:

very good, thank you
Tye on 20 Apr, 2009 wrote:

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 on 20 Apr, 2009 wrote:

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 on 21 Apr, 2009 wrote:

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 on 21 Apr, 2009 wrote:

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

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 on 22 Apr, 2009 wrote:

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

Thank a lot
sopheak on 23 Apr, 2009 wrote:

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

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 on 23 Apr, 2009 wrote:

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

Thanks
andres on 26 Apr, 2009 wrote:

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

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

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 on 29 Apr, 2009 wrote:

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 on 30 Apr, 2009 wrote:

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 on 30 Apr, 2009 wrote:

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 on 1 May, 2009 wrote:

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 on 4 May, 2009 wrote:

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 on 4 May, 2009 wrote:

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 on 4 May, 2009 wrote:

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

keep up the good work!
xaer8 on 4 May, 2009 wrote:

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

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

Thanks
Blair Nichols on 6 May, 2009 wrote:

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

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 on 6 May, 2009 wrote:

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 on 8 May, 2009 wrote:

Great plugin
Thanks
sivas haber on 10 May, 2009 wrote:

very good
Barton on 11 May, 2009 wrote:

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 on 11 May, 2009 wrote:

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 on 12 May, 2009 wrote:

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 on 13 May, 2009 wrote:

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 on 14 May, 2009 wrote:

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 on 15 May, 2009 wrote:

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 on 15 May, 2009 wrote:

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 on 15 May, 2009 wrote:

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

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

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 on 17 May, 2009 wrote:

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 on 18 May, 2009 wrote:

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 on 18 May, 2009 wrote:

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 on 18 May, 2009 wrote:

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 on 19 May, 2009 wrote:

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

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 on 19 May, 2009 wrote:

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

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

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 on 19 May, 2009 wrote:

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

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 on 20 May, 2009 wrote:

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 on 20 May, 2009 wrote:

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 on 20 May, 2009 wrote:

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

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 on 21 May, 2009 wrote:

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 on 21 May, 2009 wrote:

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 on 22 May, 2009 wrote:

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 on 23 May, 2009 wrote:

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

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 on 24 May, 2009 wrote:

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 on 24 May, 2009 wrote:

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 on 25 May, 2009 wrote:

how to get rid of queuing slides??

thx
Candace Haynes on 25 May, 2009 wrote:

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 on 25 May, 2009 wrote:

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

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

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 on 26 May, 2009 wrote:

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

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

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 on 27 May, 2009 wrote:

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 on 28 May, 2009 wrote:

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

Excelent !!!
cleverkid on 29 May, 2009 wrote:

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 on 29 May, 2009 wrote:

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 on 30 May, 2009 wrote:

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

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 on 30 May, 2009 wrote:

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

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 on 31 May, 2009 wrote:

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

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 on 2 Jun, 2009 wrote:

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 on 2 Jun, 2009 wrote:

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 on 3 Jun, 2009 wrote:

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

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

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

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

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 on 4 Jun, 2009 wrote:

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 on 4 Jun, 2009 wrote:

@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 on 9 Jun, 2009 wrote:

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 on 10 Jun, 2009 wrote:

very good, thank you
Michele on 10 Jun, 2009 wrote:

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

Lovely plugin!!

Would like to rewind at the beggining feature.

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

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 on 11 Jun, 2009 wrote:

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

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 on 11 Jun, 2009 wrote:

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 on 12 Jun, 2009 wrote:

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

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 on 13 Jun, 2009 wrote:

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 on 13 Jun, 2009 wrote:

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 on 14 Jun, 2009 wrote:

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 on 15 Jun, 2009 wrote:

@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 on 15 Jun, 2009 wrote:

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 on 16 Jun, 2009 wrote:

@jonathan

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

regards
Courtney on 16 Jun, 2009 wrote:

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 on 16 Jun, 2009 wrote:

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

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 on 17 Jun, 2009 wrote:

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 on 17 Jun, 2009 wrote:

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 on 17 Jun, 2009 wrote:

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

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

thanks.
Paul on 18 Jun, 2009 wrote:

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 on 18 Jun, 2009 wrote:

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 on 19 Jun, 2009 wrote:

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

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 on 22 Jun, 2009 wrote:

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 on 22 Jun, 2009 wrote:

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 on 22 Jun, 2009 wrote:

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

Great job!

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

thank you for sharing this...
Tom on 23 Jun, 2009 wrote:

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 on 24 Jun, 2009 wrote:

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

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

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 on 24 Jun, 2009 wrote:

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 on 26 Jun, 2009 wrote:

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

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

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

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 on 30 Jun, 2009 wrote:

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

thanks
Ellis Benus on 30 Jun, 2009 wrote:

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 on 1 Jul, 2009 wrote:

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.

Need help with your website?
Hire a CSS/JavaScript expert!

Hey, you are not logged in!
Apply for a membership or login here.

Want to join?

If you wish to contribute with your own articles, updates or gallery entries you can apply for a membership and even become our editor.

Apply here

Become a friend

Css Globe