Easy Slider 15 The Easiest jQuery Plugin For Sliding Images and Content

SÃ©rgio Soaes
January 26, 2009

good job :) very beautiful sliders cheers

Erick
January 26, 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
January 26, 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
January 26, 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
January 26, 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
January 26, 2009

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

Michael
January 26, 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.
January 26, 2009

mega. Outstanding job. Nice demos.

alain
January 27, 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
January 27, 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
January 27, 2009

Nice! Gotta love jQuery! thanks!

Belinda Clemesha
January 27, 2009

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

Victor
January 27, 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
January 27, 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
January 27, 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
January 27, 2009

I use it and its really nice. thx for it!

cssglobe
January 27, 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
January 27, 2009

nice plugin like it

SSV
January 27, 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
January 27, 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
January 27, 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
January 27, 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
January 27, 2009

I love you.

Geoserv
January 28, 2009

STUMBLED! This is fantastic Thanks for sharing.

Nathan Eshraghi
January 28, 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
January 28, 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
January 28, 2009

I so needed this. thanks for sharing.

E11World
January 28, 2009

Very very well done! I love this and can't wait to see future versions!

fatherb
January 28, 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
January 28, 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
January 29, 2009

Nice upgrade. One thing I notice: the prev button does not always appear when it should like it does in Firefox?

joseph
January 29, 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
January 29, 2009

Flock 2.0.3 = no problem Netscape 9.0.0.6 (don't laugh:) = no problem

Max
January 29, 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
January 29, 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
January 29, 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
January 29, 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
January 29, 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
January 29, 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
January 29, 2009

Works perfect in IE8 RC1.

kuba
January 29, 2009

is any way I can create numbers or thumbnails below related to specific image instead using only arrows?

Geoff
January 30, 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
January 30, 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
January 30, 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
January 30, 2009

I really like the new version of Easy Slider. Thanks for making a great plugin

slickboyj
January 30, 2009

Can I use .png images with this script?

Garrett
January 31, 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
January 31, 2009

http://pusku.info/portfolio/ - tnx for plugin.

Michal
February 2, 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
February 2, 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
February 2, 2009

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

Keith
February 3, 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
February 4, 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
February 4, 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
February 5, 2009

Thanks a lot, my next project will inspired of this article..

Ben
February 5, 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
February 5, 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
February 5, 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
February 5, 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
February 6, 2009

One more vote for a continuous cycle without rewind - thanks!

chris
February 6, 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
February 7, 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

?????
February 8, 2009

thank you this is a usfuel project

Greg
February 8, 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
February 9, 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
February 9, 2009

Thanks for this mate! been working on a new portfolio and wanted to incorporate something like this :)

Garrett
February 10, 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
February 10, 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
February 10, 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
February 10, 2009

Is it possible to integrate this with the jQuery Easing plugin? If so how?

Vayu
February 11, 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
February 11, 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
February 12, 2009

hy, just thank you for this useful and light script ! thanks again

Jeff
February 12, 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
February 14, 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
February 15, 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
February 15, 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
February 15, 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
February 16, 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
February 16, 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
February 17, 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
February 17, 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
February 18, 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
February 18, 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
February 18, 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
February 19, 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
February 19, 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
February 19, 2009

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

Jennae Petersen
February 19, 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
February 20, 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
February 20, 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
February 22, 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
February 22, 2009

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

Taylor Regan
February 23, 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
February 23, 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
February 23, 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
February 23, 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
February 23, 2009

Now following CSSGlobe in Twitter. Booya.

Chanie Pritchard
February 24, 2009

This is the new slider of choice for us. Excellent work!

Jared Crossley
February 25, 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
February 25, 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
February 26, 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
February 26, 2009

Tested on MAC Opera 9.2 OK and Safari 3.2.1 OK both with button(.png) Divs visible.

Miguel
February 26, 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
February 26, 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
February 26, 2009

Finally found a good use for this. It's a great and very, very easy to use plugin. Thanks!!!

Peter
February 28, 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
March 2, 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
March 2, 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
March 2, 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
March 3, 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
March 4, 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
March 5, 2009

What a nice script! I'm just starting with jQuery and that I'll help a lot! Thank you!

Kevin
March 5, 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
March 5, 2009

I found something that makes it work with loop. http://bogojoker.com/easySlide/ Thanks

christopher Jack
March 6, 2009

Thanks so much, that's what I am looking for :D

Benjamin Reid
March 6, 2009

@Kevin - Change XXX to your desired postion #prevBtn, #nextBtn{ top: XXXpx; }

Bryce
March 8, 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
March 8, 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
March 8, 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
March 8, 2009

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

Johnny
March 9, 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
March 9, 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
March 9, 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
March 10, 2009

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

Teebek
March 11, 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
March 11, 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
March 12, 2009

You have really smashed all the other sliding plugins around the internet! Great work.

Florian
March 12, 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
March 13, 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
March 13, 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
March 14, 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
March 15, 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
March 18, 2009

Awesome, I was just searching something like this Thank You

kevin
March 18, 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
March 18, 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
March 19, 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
March 20, 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
March 20, 2009

Would love to see how they did the one at Bottlenotes.com

mamjed
March 20, 2009

how can i change it so it doesn't slide, but fade?

alvaro
March 23, 2009

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

Gabe
March 23, 2009

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

Neil
March 23, 2009

Great script thanks a lot One more vote for a continuous scroll; thought 1>2>3>4>1>2>3...

Nebbercracker
March 23, 2009

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

vishal
March 24, 2009

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

Kaya
March 24, 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
March 25, 2009

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

EngineHere
March 27, 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
March 27, 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
March 27, 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
March 28, 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
March 30, 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
March 30, 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
March 30, 2009

Very nice. Pozdrav iz Beograda.

kevin
April 1, 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
April 2, 2009

Thanks! Great work! I would like to use this if it would work with nested list items.

Darren Taylor
April 3, 2009

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

zarouk
April 3, 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
April 3, 2009

Has anyone got easy slider to work with sifr? I'm having trouble.

jeroen
April 5, 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
April 5, 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
April 8, 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
April 8, 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
April 8, 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
April 8, 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
April 9, 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
April 10, 2009

I would also like to be able to use .png files with this? Any chance?

Eitan
April 10, 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
April 13, 2009

really nice plugin [h]

PF
April 14, 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
April 14, 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
April 15, 2009

This is great!

osu
April 16, 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
April 16, 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
April 16, 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
April 16, 2009

great script i was just searching for this, with little bit of alteration i made it for multi image slider.

Alexandre Broggio (Brasil)
April 16, 2009

Muito legal este script muito topos feitos em flash agora j da pra fazer em jquery facilmente vlw

David Ljunghill
April 16, 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
April 16, 2009

I would also like the ability to have multiple list items shown at once.

rory
April 17, 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
April 19, 2009

very good, thank you

Tye
April 20, 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
April 20, 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
April 21, 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
April 21, 2009

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

Ray
April 22, 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
April 22, 2009

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

sopheak
April 23, 2009

I have been waiting to get it for a while. it's so fantastic job. Thanks

JR
April 23, 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
April 23, 2009

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

andres
April 26, 2009

play and pause bottom, that`s a good idea

Al
April 27, 2009

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

Oliver
April 28, 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
April 29, 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
April 30, 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
April 30, 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
May 1, 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
May 4, 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
May 4, 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
May 4, 2009

great article! Very easy to understand and customize. Thank you for sharing! keep up the good work!

xaer8
May 4, 2009

Great plugin. Fully customizable and works in IE too! Thanks for sharing!

Antonio
May 6, 2009

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

Blair Nichols
May 6, 2009

Awesome article, found some others before this one but this plugin seems the best. Thanks.

Bill MacKrell
May 6, 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
May 6, 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
May 8, 2009

Great plugin Thanks

sivas haber
May 10, 2009

very good

Barton
May 11, 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
May 11, 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
May 12, 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
May 13, 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
May 14, 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
May 15, 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
May 15, 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
May 15, 2009

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

Xth
May 16, 2009

Thx for the script.. :">

Thifu
May 17, 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
May 17, 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
May 18, 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
May 18, 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
May 18, 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
May 19, 2009

Muy bueno, la verdad qeu se agradece!!

safe as milk
May 19, 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
May 19, 2009

Thank you so much for the great slider.

sudeep
May 19, 2009

Thank you so much for the great slider.

Steve
May 19, 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
May 19, 2009

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

Jon
May 19, 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
May 20, 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
May 20, 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
May 20, 2009

Great slider, very simple and very usefull! Thx for sharing ;-)

Fred
May 21, 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
May 21, 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
May 21, 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
May 22, 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
May 23, 2009

Is it possible to place a horizontal slider as a item of a vertical one?

dlv
May 24, 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
May 24, 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
May 24, 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
May 25, 2009

how to get rid of queuing slides?? thx

Candace Haynes
May 25, 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
May 25, 2009

I'd like the feature that disables the rewind function and restart the animation in the beggining. Is that possible?

William
May 25, 2009

thank you for a great plugin :-) (i use it on my new site)!

Candace
May 26, 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
May 26, 2009

Oh and I posted because I am hoping someone will fix it :( Probably simple but I am frustrated now...

Joe
May 26, 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
May 27, 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
May 28, 2009

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

Juan Manuel
May 29, 2009

Excelent !!!

cleverkid
May 29, 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
May 29, 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
May 30, 2009

hey, it s complicated! i can deal with it, can u help me??

jsssc
May 30, 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
May 30, 2009

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

thai
May 31, 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
May 31, 2009

nice plugin ! serves the purpose in an excellent way

Mike Centola
May 31, 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
June 2, 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
June 2, 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
June 3, 2009

Thanks man. Great plug-in. It's super!

level23design
June 3, 2009

This is a great plugin! Just what I was looking for on this one site I am working on!

JC
June 3, 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
June 3, 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
June 4, 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
June 4, 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
June 9, 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
June 10, 2009

very good, thank you

Michele
June 10, 2009

I try multiple slide and it works... great job for this script.. thanks

Ismael
June 11, 2009

Lovely plugin!! Would like to rewind at the beggining feature. You know how are the clients. =/

vlp
June 11, 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
June 11, 2009

very nice! I was impressed!

Jeff L
June 11, 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
June 11, 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
June 12, 2009

i love this plugin. nice clean work. thank you

Ryan Furtner
June 13, 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
June 13, 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
June 13, 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
June 14, 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
June 15, 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
June 15, 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
June 16, 2009

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

Courtney
June 16, 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
June 16, 2009

Has anyone got a version working with a caption under the slideshow that changes with each advance? Thanks!

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>

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
June 17, 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
June 17, 2009

Hey Thanx bunch, great slider u got there...

manchurr
June 18, 2009

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

Paul
June 18, 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
June 18, 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
June 19, 2009

How to place 2,3,4 slider on one page? Thanks

Pierre
June 21, 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
June 22, 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
June 22, 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
June 22, 2009

Kerr McHale http://www.position-absolute.com/creation/slideshow/

Danish
June 22, 2009

Great job! Truly tremendous, I really respect your work and love this plugin thank you for sharing this...

Tom
June 23, 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
June 24, 2009

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

Yanxerip
June 24, 2009

I love your job.. Thxs for share. From yanzen in Indonesia. GBU

Ellis Benus
June 24, 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
June 24, 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
June 26, 2009

Hi, is there some update in the future?

Sam
June 26, 2009

Sweet jQuery plugin, was very easy to incorporate.

BrandonSetter
June 26, 2009

I there any way to go from left to right instead of right to left?

Patz
June 27, 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
June 30, 2009

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

Ellis Benus
June 30, 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
July 1, 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.

Easy Slider 15 The Easiest jQuery Plugin For Sliding Images and Content

Features

controlsShow

controlsBefore and controlsAfter

controlsFade

firstShow and lastShow

auto

pause

continuous

Demos

Future

Enjoyed the article?

Comments (308 Comments)