jQuery plugin Easy Image or Content Slider

posted on:January 6, 2009

jQuery plugin Easy Image or Content Slider

Click here for the new version of this plugin

This is my first jQuery plugin. I wrote several jQuery scripts but never made a real plugin just because I was I afraid of it’s complexity. It turned out to be a lot easier than I thought so I went ahead and created this one.

Easy Slider (as I call this plugin) enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css.

Download easySlider.zip

Getting Started

First you’ll need content and it should be wrapped inside a div containing an ordered list where each list item represents one slide. Here’s a markup example:

<div id="slider">
	<ul>


	<li>content here...</li>
	<li>content here...</li>
	<li>content here...</li>
	...
	</ul>

</div>

You can basically put whatever you want inside list items as long as you keep the same dimensions. My initial idea was to use this slider for image gallery as on Templatica’s homepage but I’ve used it for other stuff too.

To activate the script you will need to download the files, place jQuery file and easySlider.js somewhere on your site and link to them:

<script type="text/javascript" src="/js/jquery.js"></script>

<script type="text/javascript" src="/js/easySlider.js"></script>

The action starts when you add this lines of code to your JavaScript:

$(document).ready(function(){
	$("#slider").easySlider();
});

This basically initiates the script on page load where "#slider" is css selector of the element(s) that you wish to apply script to. You can also use multiple elements using their class names i.e. $(".list").easySlider();

Next is up to your preferences – styling. This is how default styling looks like:

#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
	}
#slider, #slider li{ 
	width:500px;
	height:200px;
	overflow:hidden; 
	}
span#prevBtn{}
span#nextBtn{}

Not much there, is it? The most important thing here is to keep the same dimensions for the content area and each list item (slide). Also, overflow:hidden is obligatory. Other than that, you have free hands in adding your own style to the Easy Slider! To get an idea how it can be spiced up, you may take a look at Templatica’s homepage.

How does it all work

Script automatically adds "previous" and "next" buttons in form of span elements with nested anchors just after the content element. Spans have assigned IDs that you can use for css selecting:

<span id="prevId"><a href="javascript:void(0);">Previous</a></span> 
<span id="nextBtn"><a href="javascript:void(0);">Next</a></span>

On each click (previous or next button) script calculates the current "position" and makes a one step in requested direction. So, the slider jumps from one slide to another. Once it reaches the end (last slide), the "next" button fades away and re-appears only if "previous" button is clicked again. Same goes for sliding towards the beginning.

Options

The following options are configurable:

prevId – id for "previous" button
prevText – text for "previous" button
nextId – id for "previous" button
nextText – text for "next" button
orientation – horizontal or vertical, horizontal is default and if you want vertical set this to ‘vertical’
speed – animation speed in milliseconds, default value is 800

Yes, you saw it correctly, vertical sliding is also possible!

Options are added when calling the script:

$(document).ready(function(){ 
	$("#slider").easySlider({
		prevText: 'Previous Slide',
		nextText: 'Next Slide',
		orientation: 'vertical'
	});
});

Make sure that you don’t put the comma after last option.

Demos

Here are some blank, non styled demos. Check out the script in action:

To check out styled demo, please visit Templatica.

What makes this slider script different

Because of it’s simplicity and light-weightness (is that a word ?! ) I believe that is is much easier to deal with this plug in and configure it. The appearance is totally editable with css so all of you afraid of getting their hands dirty with JS code can easily use this.

Enjoy!

Enjoyed the article?

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

Share on Facebook Tweet this Delicious StumbleUpon Reddit Subscribe

Comments (169 Comments)

Martin Muehl
January 6, 2009

Great slider and just in time for one of my new projects!
cssglobe
January 6, 2009

@Martin: offtopic - see you in Klagenfurt for IM Austria? :)
V1
January 6, 2009

the example markup you give does not match with selectors you are using in your script. Might be something to fix before it confuses people :)
Chris Barnett
January 6, 2009

Looks good. Will see if I can manage to style up those prev and next buttons.. Thanks for the article, good work!
cssglobe
January 6, 2009

@V1: thanks for the heads up! I renamed the elements several times while writing this article, hence different names. Fixed!
crs
January 6, 2009

So simple and effective! Well done Alen!
andreas
January 6, 2009

Very nice! :-) One thing that went wrong when I tried it the first time: I clicked on the "Next"-link, watched the nice slide, clicked again for the next pic and was surprised that it showed the first slide again! Why: because I didn't recognize that the "Next"-link moved to the right and has been replaced by the "Previous"-link... I'm sure this will happen to many users as links are normally not changing positions :-)
Pieter B.
January 6, 2009

It's a very nice plugin! I'm probably going to use this when needed. As said before, I'd try to do something with the replacement of the 'Next'-link. Also, when on the last image, there could be a 'Back to First'-link or something. Good job!
cssglobe
January 6, 2009

The thing is, I offered blank, non-styled demos... just basic markup, no real styling... on Templatica homepage I have styled buttons, and properly placed. I will add another full styled demo soon.
Brenelz
January 6, 2009

Wow.... This is a great JQuery slider. I love that you allow us to style it any way we choose. Is there any way switch content / images after a set time limit?
Brandon Cox
January 6, 2009

Very nice. Not only is it a nice plugin, it's also a confidence builder for me. I still have that feeling that writing a plugin is beyond me just a bit. Thanks for the boost!
Al
January 6, 2009

Nice job. Thanks for sharing. Pretty good for your first one :)
mbh
January 6, 2009

Alen ... great work. One devils advocate question... what's your take/opinion on the user having javascript off? I ran a couple of quick test in firefox and unless I missed it yes the content becomes inaccessible. Sure, what are the odds on the average user having javascript off... yeah probably low but... I unless I missed something we'd just be of the take of hey if a particular piece of content is important don't place it in the slider. This is absolutely not knocking your work as that stands on it's own merit... it's just the okay do I take a chance with content or is their a parachute option of some sort.
cssglobe
January 6, 2009

@mbh actually, content could be accessible if we tweak things a bit. Removing fixed size for container (#slider) and adding it with JS would do the trick. I will do that. Thanks for the comment.
cssglobe
January 6, 2009

@Brenelz it could be added to the script yes. I wanted to keep the basic functionality for this first version.
Ozh
January 6, 2009

Pretty cool. Add ajax image loading capabilities and that's awesome :)
Graeme Mac
January 7, 2009

To add to @Brenelz's comment, I'd also be interested in learning how to auto-rotate the content. If you have the time to help us learn how to add that functionality it would be most appreciated.
Fabryz
January 7, 2009

Very nice plugin, tagged!
Matt Williamson
January 7, 2009

Is it possible to show multiple items at once, like for pagination?
Raymond Selda
January 7, 2009

Wonderful plugin! I hope this will be featured as one of the top JQuery plugins. Thank you for sharing.
Gerd
January 7, 2009

A great jQuery plugin! Thanks for sharing. Like @andreas, i was a little bit confused, when clicking the link for the non-styled slider for the second time and seeing the first slide again.
cssglobe
January 7, 2009

Thanks for the kind words guys. Sorry about non styled version, but in my experience it's easier to use something when it's bare-boned. I am preparing several full styled "skins" for my next article so stay tuned :) Thanks!
Janko
January 7, 2009

Looking great, I was thinking of creating something like this on my blog.
Elena
January 7, 2009

This is very simple and very usefull, just what I needed. Thank You!!!
Richard Standbrook
January 7, 2009

Looks great, nice and simple. What about auto-rotating as has been mentioned. And as a jQuery newbie, is it possible to change the transition effect, to kind of bounce the slides or ease them in and out?
Jason Judge
January 7, 2009

Just a note on the demos: the next and previous links should not jump about like they do on the first and last items in the slider sequence. Either place them on the left and right sides, or grey them out once they are no longer relevant. As it is now, the 'next' link under the mouse moves as soon as it is clicked.
renjunlong
January 7, 2009

WOW,Great Job!Thank you very much!
Designer
January 7, 2009

absolutely impressive and very useful script.........thanks
komax
January 7, 2009

Hi, thank's for your beautifull plugin, one question ... is possible insert horizontal slider inside vertical slider? I need to slide 4 vertical image (floor plan) but I need that each one have left and right slide. Thank's Komax
Fouad Masoud
January 7, 2009

this is kinda fun since i took it off ur other site when it was first released online :D but i had to go with something else that i tweaked a bit. i gave it up coz of a layout issue i had where i needed to get the next and back arrows out of the over-flow: hidden; box. i tried to tweak it and got somewhere close to fixing this issue. ill digg it out and post it. i don't know if u updated the plug-in or not. ill check it 2night after work :D by the way gr8 work and thank you for making it standard complaint. since there are some implementations out there but most dont validates or are using non-logical markup. gr8 stuff
ignari
January 7, 2009

Great plugin Allen. I would also add: $('#prevId, #nextId').attr('href', 'javascript:void(0);'); To avoid writing that directly in the content. Ignacio
ignari
January 8, 2009

nvm my previous comment, I thought the links were in the html. Sorry :p
Elvis
January 8, 2009

Nice one, a lot more easy than jcarousel!!! Here are my 2 cents: How about an autoscroll function for this gem? The best would be if one could start/stop this autoscrolling via link (probably the autoscrollstate could be saved as a cookie?!?) I'll definitive will use this for one of my next projects!
genia
January 8, 2009

Great script,thanks for making it available for free
David Toms
January 8, 2009

can't I just do this with the jquery cycle plug-in? .. or scroll-to?
Abhisek
January 9, 2009

This is awesome! Gonna use it!
stalkerX
January 9, 2009

Fine solution! Here is my work: jQuery Slider Player (Page in German): http://playground.ebiene.de/1052/jquery-slide-player/
germo
January 9, 2009

great this yes that break of beautiful!
Workingman
January 9, 2009

Any thoughts to making the navigation "circular"? It would be great to have fixed navigation buttons/text in the design of the page. I love the "light-weightness" of the code. (Yes, I think it's a word now!!)
komax
January 9, 2009

Hi, is possible slide next and previous outside main layer? I need to slide from href and not from selfmade button, is possible call specific function? Thank's for help.
Joseph Pecoraro
January 9, 2009

Excellent plugin! I was looking for something like this earlier this week and this really made me happy. Extremely well done. One thing that bothered me was the autogenerated next/prev links. In my case I wanted to use existing elements on the page. So I modified the plugin to instead use prevId and nextId to grab existing elements, and just add the easySlider's next/prev actions to those elements unobtrusively. I think its a lot simpler. Here is my sample: http://bogojoker.com/shell/ Is there an advantage to the auto-generated span's that I'm missing?
mohammed tantsh
January 9, 2009

hello nice slider but how to make auto slide ?
Joseph Pecoraro
January 10, 2009

I realize this is the first version, meant to be simple. Also, cssglobe has put in the comments that he is "preparing several full styled skins for my next article" so I know that he will likely update this in the future. But I had a need for some features like looping, autoplaying, and non-autogenerated next/prev links. Since it was GPL I gave it a shot. If you need these features feel free to take a look but make sure you check back for official updates from cssglobe: http://bogojoker.com/easySlide/
Joseph Pecoraro
January 10, 2009

@Workingman: Circular navigation. Like loops? I took some time to put this in, because its a feature I wanted too, and it looks like it works pretty well (see above comment). @komax, @mohammed: There is a private function inside of the easySlide plugin called "animate". You would want to call animate('next') to move to the next slide. In the case of looping you would want an interval. However to access the specific animate function you would have to modify the plugin (see above comment).
cssglobe
January 10, 2009

If time permits, I will continue to update this plugin, that's for sure. Joseph made some alterations. So, all of you that can't wait for version 2, you might want to check that out. The thing is, limited functionality was my intention cause I wanted to make things simple and straight to the point. At least at first. :) I enjoy writing short, simple and readable stuff that anyone can use, even a person without any JS knowledge. I will keep adding all sorts of things to it, but I'm afraid that it will not be "easy" slider any more. :)
Nitin Parmar
January 10, 2009

Great script. THANKS for making it available.
Joshua (Bada Bing!)
January 10, 2009

This is a great script, thanks 'cssglobe'! However, I can't get it to work in my wordpress site.. I think it has to do with the inline javascript which calls the action. But I'm not really sure.. The 2 external javascripts are called on correctly.. maybe it's something else. Could you please take a look at it? Located at: www.ijosh.nl. I would love to use this script:) Thank you very much!
Necro
January 10, 2009

this is a nice plugin !! But... if I wanna put 2 sliders on the same page like this : $(document).ready(function(){ $("#slider_alpha").easySlider(); $("#slider_omega").easySlider(); }); ... The next & prev link don't seems to know witch ID to slide... It slides randomly #slider_alpha or #slider_omega... How to fix this ? Thanks !!
cssglobe
January 10, 2009

@Necro: use different id names when calling the function: $(document).ready(function(){ $("#slider_alpha").easySlider({ prevId: 'btnPrev1', nextId: 'btnNext1' }); $("#slider_omega").easySlider({ prevId: 'btnPrev2', nextId: 'btnNext2' }); });
Davor Peic
January 11, 2009

Really nice and simple!! Thanx Alen!
Brian
January 11, 2009

Great plugin, thinking of using it for a design gallery. How about a variation that works like the one here: http://aws.amazon.com/ Which has paging for each image e.g. 1,2,3,4. It gives a better idea of how many there are than next > and < last do Thanks
Phil
January 12, 2009

Hi, I think this is really great, but I can't get it to work correctly and not too sure what I've done wrong. When I click the next button the next slide appears but it appears lower down than the previous slide. I've linked to a screenshot that shows it better than I can describe!! www.siesta-media.co.uk/images/slide_test.jpg If anyone could help I'd be greatful. Thanks
Merewald Valletta
January 13, 2009

Awesome, thanks. I'm using it on the update of my site. You rock.
Kadir GUNAY
January 13, 2009

Hi, thank you so much for this article. I translated and told on my own site for Turkish web master. And i added a link for the original article.
5antom
January 13, 2009

Hi Alen, what a lovely plugin. Been looking for something like this for ages. Can it be used to make a drill down menu like that of the i-pod that slides horizontally? like a drill down navigation for complex menus. http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu/
ne2d
January 13, 2009

Great plugin! Thanks for sharing. But when i put 2 sliders in one page just like in previous comment <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#slider").easySlider({ prevId: 'prevBtn', nextId: 'nextBtn' }); jQuery("#slider2").easySlider({ prevId: 'prevBtn2', nextId: 'nextBtn2' }); }); </script> it doesn't work :-( I dont know why. Is someone able to show code or demo? Thanks!!!
Joe Weber
January 13, 2009

Thanks Alen, this is very cool. Any way to have it cycle automatically?
Suzy
January 15, 2009

hey alen, this is fantastic script. Well done. Im not too familair with jquery but i was wondering how would you approach demo 3 in such a way that the content slides the opposite way first? Inotherwords how would you make the first div slide down as opposed to up when you click the button?
Syl
January 15, 2009

Great script. Thanks for sharing How do we style the previous and next to be buttons (instead of text)? Thanks
Tim
January 16, 2009

Awesome Script Alen! So Simple! Well done! One question though, Is it at all possible to show 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? Thanks again!
Frederic
January 16, 2009

Autoslide !!!! How ? When ? :)
Max
January 17, 2009

Great stuff! Two quick things: Not sure how to style the prev/next navigation? I tried adding CSS to the span#prevBtn and span#nextBtn and nothing happened? I then tried adding the child "a" link anchor and still nothing? How do you style these? Also, having a main wrapper with auto centering margins creates a horizontal scroll bar in Safari? I noticed this with another jquery image script as well. Is there a trick to fix this? Thanks!
Max
January 17, 2009

Is there a way to present a series of thumbnails(say several rows, driven with CSS) below the Easy Slide window? So you could click on a thumbnail and the full size image would appear in the window with the next and prev navigation ready to activate on that image... Thanks!
Max
January 18, 2009

I figured out how to add some styling to the next and prev navigation. Some things just will not work. I cannot get rid of the words. I want to use background images like so: span#prevBtn{ display:inline; cursor:pointer; background:url(images/preview_prev.gif) no-repeat; width:51px; height:19px; text-indent:-9000px:} I have tried experimenting with the display: inline and removing the nextText from the script. Nothing works. I would love some pointers on styling these and removing the actual words...before I go insane! Thanks!
Khaled
January 19, 2009

The same question: "One question though, Is it at all possible to show 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?"
dende
January 20, 2009

Hi, i also think, a possibility to let it scroll automatically would be great. I have no idea, how difficult an implementation would be, but it should be possible, just like in this slideshow-plugin http://malsup.com/jquery/cycle/ . Whatever i like your slider better ;) its GREAT :>
Fredrik
January 20, 2009

I am trying to run this: <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ loop: true, autoplayDuration: '3500', prevId:'prev', nextId:'next', autogeneratePagination: false }); }); </script> and <div class="sliderbar"> <div style="float: left;"> <span id="prev"><a href="javascript:void(0);">Previous</a></span> </div> <div style="float: right;"> <span id="next"><a href="javascript:void(0);">Next</a></span> </div> </div> With Josephs modification but i can't get it to work. The "Next" and "Previous" text doesn't display. What i wanna do is i want it to autoplay and loop, but i still wan't the users to be able to klick themselves to the pic they want to watch, instead of wait until the slider loops and gets to the right spot again.
Gaspard
January 20, 2009

Hi, Really love your plugin, I don't know anything about javascript but I implement it quickly to my page. I love the way using list to add images at the slider... Is anyone encountering problem with Safari or any other webkit browser, Chrome ... My slider works perfectly in IE and in Firefox, but it slide one and a half withe webkit based browser... Any idea would be appreciated. Really hope you would update this script with some more feature requested by the others comment. My wish would be: is it possible to make content scrollable if javascript is off. Cheers, and happy new year. Gaspard Ps: sorry for my frenchglish ;)
Yman
January 21, 2009

hey ppl, i hav a question here i hv tried messing with the js, and i still couldn't figure out how to create a "home" button to return to first page. Sorry for the noob question. here's the important part: if(dir == "next"){ t = (t>=ts) ? ts : t+1; } else if(dir== "prev"){ t = (t<=0) ? 0 : t-1; } else if(dir== "home"){ t = (t<=0) ? 0 : t-1; }; what should I modify under (dir =="home") condition?
Yman
January 21, 2009

ah, nvm, i some how work it out with a very stupid way :)
cssglobe
January 21, 2009

To everyone: I am creating an upgraded version of this slider that will have autoscroll, a possibility of paging instead of previous/next, first/last button and perhaps few other things as well (throw in a suggestion). Also I will provide one or two fully styled examples.
East
January 21, 2009

Multiple sliders on 1 page would be nice? Or is that already possible? I can't get it right.
Nandx
January 21, 2009

First of all, congratulations. Your jQuery plugin is great, very simple to use and works perfectly, but.. As other people said before, I'm trying to put two sliders in one page, but I cannot get them running. The navigation doesn't work fine when I put more than one slider. I have no idea if it's because I haven't the right code or what... Any ideas? Thank you for all.
cssglobe
January 21, 2009

@Nandx and others: I am coding the update for this plugin as we speak, version 1.5 will be published on Friday and it will support multiple sliders. So please stay tuned. Thanks!
East
January 21, 2009

Nice!
Images use instead of text
January 22, 2009

Thanks for sharing this code.. But I have some quiry if i want to use a images instead of next of previous text then where should i chage the code
Joe
January 22, 2009

Amazing! Can't wait to see the updated version 1.5!!!
jeroen
January 23, 2009

Very nice script. Also waiting for the autoscroll function. Is it also possible to use other effects? I want to use the Fade method is this easy to adjust?
Adeline
January 24, 2009

Thanks for the tip, will definitely implement in my next project!
Dee
January 25, 2009

I would like to use images for the previous and next button (as the comment 4 above asked about) and would like to know where I insert that in the code. Please help as soon as you can.
Nandx
January 25, 2009

Sorry, but.. where's the new version 1.5?
cssglobe
January 25, 2009

It will be online tomorrow
Jose Castillo Areiza
January 26, 2009

Hi, I have a content inside each LI tag, I inserted images, paragraphs, but with an UL LI inside they went crazy... is there a solution for this?
cam filmi
January 26, 2009

I would like to use images for the previous and next button
sergey
January 26, 2009

this is a nice plugin! thx
zarouk
January 26, 2009

Hi all, Great plugin ... thank you. Waiting for the new version with the autoscroll function to use it.
Geoff
January 27, 2009

Great Plugin â€“ thanks for the work you've put into it. There are far too many overcooked/frilly jquery image galleries out there. Yours is one of the few nice ones I've found so far.
Nicolas Borda
January 27, 2009

This is a fantastic plugin, I love it! I was looking for something so lightweight and simple for ages. I'm building a Drupal modules that will alow to use this plugin as a way to display views (lists of content made through a ui with the amazing views module). The problem I'm having is that this module prints out field wraped in divs inside the list items. The slider still works, but now you get additional empty slides, one for each nested div inside list items. Is ther a way to support nested divs or other elements in list items?
Nicolas Borda
January 27, 2009

@Jose Castillo Areiza : This happens because each nested element inside list items are considered a slide, like the list item itself. That's why you get the additional slides, and it looks like its going crazy. If anyone finds a way to support nested items in EasySlider please add a comment. @cam filmi & @Dee: There would be two ways to do it, one modify the easySlider JS in line 56 and add the image tag inside the anchor. Another way would be to use a CSS image replacement technique, I tried Phark revisited and it didn't work (maybe because of display:inline?), here is a link with most of the tecniques: http://www.mezzoblue.com/tests/revised-image-replacement/ Change line 56 to something like this: $(obj).after('<span id="'+ options.prevId +'"><a href="javascript:void(0);"><img src="images/btn_prev.png"/></a></span> <span id="'+ options.nextId +'"><a href="javascript:void(0);"><img src="images/btn_next.png"/></a></span>');
Andre
January 28, 2009

Is it possible to change the color of the next and previous button? Need some help :-(
Jason
January 29, 2009

Can you give an example of how to use prevId and nextId with an image?
cssglobe
January 29, 2009

@Andre: sure just select it with css #nextId and define the appearance.
cssglobe
January 29, 2009

@Jason: Take a look at the example here: http://cssglobe.com/lab/easyslider1.5/02.html
Sinister Edd
February 10, 2009

I like this script, it was really easy to setup. But i have a question, I have some links: link1 link2 etc. I want them to link to a section in the cycle content so if i click on link2 it sycles to he section where the content is of link2. I hope you could help me with that. Thanks in advance.
Dan
February 11, 2009

Anyone having issues getting this to validate in XHTML Transitional? Is it a known issue?
danreb
February 14, 2009

Great this is what I am looking for, simple and sweet. thanks
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(); });
Miles Tinsley
February 22, 2009

Jennae, all you need to do is wrap it in <script> tags and put the code somewhere on your page. Anywhere will do, but it makes sense to put it quite near the actual slider :P <script> $(document).ready(function(){ $("#slider").easySlider(); }); </script>
nobull
February 22, 2009

to Jennae Petersen u need to write an html tag <script language="javascript"> $(document).ready(function(){ $("#slider").easySlider(); }); </script> preferably in the head tag
kapil jagtap
February 25, 2009

Very nice work dude.. :)
Val
February 25, 2009

Hi! This is great, just what I was looking for! Helps a lot, thanks for sharing! As others have already asked, how could I slide to a particular slide from a pagination, or back to first slide link. Has anyone got a solution? Your help would be greatly appreciated! Thanks in advance.
Val
February 25, 2009

And the answer to my question is: http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding :-)
jBay
February 26, 2009

I know there have been many posts for multiple sliders on one page, although is it possible to have two sliders work off of one set of buttons? I want to have an image div and a text div in two different locations, but have them change together. Is this possible? word!
Zend
February 26, 2009

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.
josh
March 3, 2009

Nice script. I am trying to figure out a way to call the 'animate' function from another script. Basically I would like to perform the 'NEXT' function from another function. I looked into the animate function but I cannot call that from outside EasySlider. Any thoughts?
Peter
March 4, 2009

In section "How does it all work" span Previous button shoul be prevBtn instead of prevId i think ?
Roki
March 4, 2009

I have created controls on top of the content <span id="prevId"><a href="javascript:void(0);">Previous</a></span> <span id="nextBtn"><a href="javascript:void(0);">Next</a></span> but i dont want controls to be on bottom of the content, how can i hide remove them or move them somwhere else. Thanks
Mike H
March 10, 2009

Nice work, light weight and seems to work well. In your post though, under Getting Started you've written that the div should contain an ordered list, while your example (and the easy slider code) seems to work with an unordered list.
Peter
March 10, 2009

Nice plugin :) Is it possible to get it to work inside a jquery tab? I have this in <head> <script type="text/javascript"> $(function() { $('#container-1 ul').tabs(); }); $(function() { $('#container-2 ul').tabs(); }); </script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider(); }); </script></head> The slider keep loading but no images turns up. If I move the slider outside tab it's working. Ideas anyone?
Ant
March 11, 2009

why does my setup only play the script properly until you refresh the page, then it bugs up.... it doesn't happen in internet explorer though... http://www.lime-five.com/wordpress/wp-content/themes/theme/js/test.html
Peter
March 11, 2009

I found a solution to my own problem. I changed all ul-references in easySlider.js to ol and changed <div id="slider"><ul>..</ul> to <div id="slider"><ol>..</ol>
netmastan
March 12, 2009

This is an excellent and simple slider but only problem is controlling the next and prev link. It should be flexible such way that I can move next and prev links anywhere as long as it has an id. if someone can hack this it would be the perfect and compact slider. Regards
Joachm
March 12, 2009

Great work very simple for a NOVICE like me. Im trying to work out how to control two or more divs with one function. So they have different timings (Delay) So one finishes slding before the other. Any help Please! Thanks
SK
March 15, 2009

I have run into problems when trying to populate slider contents via AJax-JSON from Flickr. Here is the code I am trying to use: var Slider = {}; Slider.images = 'empty'; Slider.imageItems = function(jsonurl){ $.getJSON(jsonurl, false, function(data){ Slider.images = '<li>'; $.each(data.photos.photo, function(i,item){ var image = '<div style="width:100px;height:65px;overflow:hidden;float:left;margin:5px;">' + '<img src="http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_s.jpg" alt="' + item.title + '" />' + '</div>'; Slider.images += image; }); Slider.images += '</li>'; }); return false; }; Slider.init = function(){ $("#slider").easySlider({ controlsBefore: '<p id="controls">', controlsAfter: '</p>', controlsFade: true, auto: false, continuous: true, prevText:'', nextText:'', prevId: 'prevBtn', nextId: 'nextBtn', loop: true }); } $(document).ready(function(){ //getting first elements Slider.imageItems('/site/objectscarouselimages/perpage/16/page/1'); $('#slider ul').append(Slider.images); Slider.init(); }); For some strange reason Slider.images is always "empty" and only populated with images after the line Slider.images += '</li>'; At the document.ready part $('#slider ul').append(Slider.images);, it is empty. Something is wrong with the dynamics of the code, I guess. What could be done here?
Allan Fonseca
March 15, 2009

Thanks!! Thanks!! Thanks!! Thanks!! Thank you.....
ortak miras
March 18, 2009

very good, thanks
Noski
March 18, 2009

Hi, thanks for making a great slide reel. I know this is a really noob question but how can I add more than 5 slides and will it have an affect on another slider thats using the same code, fi so how can I prevent that? Cheers
Noski
March 19, 2009

Tiz ok have just answered my own question doh [:
Tiago Celestino
March 20, 2009

Thank you very much man. The script helped very in my new project. hugs!
Jason Geyer
March 22, 2009

This is a really great script; perfect for what i was looking for! Is there any way to assign the previous/next buttons to existing images in the page layout without using CSS? My main layout consists of a big sliced graphic, and I really would rather not try to single out 2 small slices to be aligned in CSS if possible. Thanks!
Nate
March 23, 2009

I played with it for a couple of hours, I can't get it to work on my Wordpress blog.
Andrei
March 23, 2009

I am using the slider on an ajax enabled asp.net website. The problem is that every time an ajax callback occurs, the "Next" and "Previous" buttons which are rendered from javascript disappear (do not get rendered), even though the javascript code that renders them is executed. I even tried putting everything in a single update panel, but it didn't work. The only way to make it work was to disable ajax, but unfortunately, this is not acceptable in my case. Any ideas? Thanks
Tim
March 26, 2009

Hey there! I am also having problems with this script in Webkit Browsers. They Scroll 1 and a half to two slides at a time, works fine in FF and IE.... go figure! :P Anyone got any suggestions?
Enrique
March 26, 2009

Any way to show ALWAYS the "Previous / Next" buttons ?
Drew
March 27, 2009

Beautiful, thank you so much for this.
Charlie Rogers
March 31, 2009

Hi, Guys This pluGin Is fabulous and i do appreciate the Developer Work and Guys can you post these sort of plugins info to my site http://www.gossipinn.com ? I wil be waiting for your responce ThnX and Best Regards
Daniel Craig Jallits
April 3, 2009

@Nate This works for me! <?php wp_enqueue_script('jquery'); ?> <?php wp_head(); ?> <script type="text/javascript" src="<?php bloginfo('template_directory');?> /js/easySlider.packed.js"></script> <script type="text/javascript"> var $j = jQuery.noConflict(); $j(document).ready(function(){ $j("#slider").easySlider(); }); </script>
JosÃ© Airosa
April 15, 2009

I really can't get it to work on safari. It simply doesn't work. Working on all browsers either on Mac and Windows. But safari no good. I tried http://templatica.com/ and it works, so it must be a personal problem, but i can't figure it out. Best regards.
Jean Marie
April 16, 2009

Great work! Very easy to understand/use, leightweight and fullfilling my requiruements for a content slider. Thanks, Jean Marie
ZdenÄ›k DoleÅ¾al
April 17, 2009

Hi Alen, Very nice script! I've written something similar some months ago, but yours is better :-). I've made one improve into your script: Imagine you have three <li> elements visible and want to slide out only one of them. So you have to specify how much you want to slide every time slide-button is clicked. This value is used instead of obj.width() (or height). Best regards.
Amit Dixit
April 20, 2009

nice script Allen, thanks for that. When we are viewing the first item and when we click on the PREV button it slides the whole slider to the end of the list and shows all the items. Can we not slide it backwards to see the last item from the first item? Thanks again ;-D
Logan
April 25, 2009

When I put it into my wordpress theme, it doesn't seem to make the up and down buttons? Can somebody help me.
Mike Lewek
April 27, 2009

Hi, I think I have come into some possible interference the script has when using png-24 background images with transparency. I'm not exactly sure, but I'd have to say it's a good guess because I can't seem to find anyone with a similar problem. CIAO.
Mike Lewek
April 27, 2009

Well, scratch that theory. It won't show a jpg either. Maybe a naming conflict...I'll let you know. :)
peter
April 28, 2009

Nice script~~
Mike Lewek
April 29, 2009

Well, I can't imagine it's a naming conflict either. Who knows... Very Nice script btw. Seems to work in every browser I've tried. :)
Bakadesu
May 1, 2009

I needed the ability to smoothly slide across all images at a constant speed, so I set [continuous: true] and [pause: 0]. However the easing between images disrupted the smoothness I was looking for. So I added the option to control the easing (linear/swing). Posted the code here: http://pastebin.com/m7a2bd086 Added lines: 55, 122, 129 So in order to get a slider with a constant speed, I used the following options with the modified plugin: { auto: true, continuous: true, pause: 0, easing: 'linear' } I hope this helps someone. Thanks Alen for the original script!
mike
May 4, 2009

can it be used to slide flash instead of imgs?
Ankit Sabharwal
May 5, 2009

this doesn't seem to work for some strange reason ! will have to figure that out .. anyways great tutorial !!
Dimitris
May 10, 2009

That's so beautiful. I was just wondering will I be able to go to next / previous by clicking the slide it self and not by using a previous next link below ?
cmd
May 15, 2009

I have 2 audio files in slides 1 and 2, first, how can I ONLY start audio 1 when the page loads and have to automatically stop when I click next? In the same way I want audio 2 to begin once slide 1 is hidden. Is it possible to achieve this, pls help!
Sjoerrigter
May 16, 2009

Thanks for the great slider. I really like it. Has anyone tried to implement this in Magento yet? I am trying to get it to work as a custom block. I think i have all the settings right, but is still doesn't work. I am trying to install it here: http://www.sjoerrigter.nl/test/medisales/
Hussain
May 17, 2009

Great job, but what if my content is complex and I need to have nested DIVs inside each content? I do not think it is a good idea to have nested DIVs inside lists... I will be appreciative for your advice.. Regards Hussain
ayoub
May 19, 2009

I really liked this plugin. I was wondering if it is possible to slide to a specific image or content using this plugin, like (by clicking a button 1 it slides to content 1, clicking a button 4 it slides to content 4 ..) ?
Jonathan
May 19, 2009

How I can insert elements after dinamiclly?
Mike
May 20, 2009

When I reach the last picture in the slider, I want to return to the first picture when a users cliks on the "Next" button. What must be changed in the code for this option?
Sven
May 20, 2009

Hi and thanks for that great plugin. I have one question (that is also mentioned above): Is it possible to "jump" directly to a specific slide-number? I need this for a form that's on the second slide element and that should be opened again if an error occurs after the form is submitted.
Sunil Rawat
May 22, 2009

the jquery demo is very good but i want to know that can i place next and previous link on any place like on the top or anywhere. Plz anyone know the solution for this or any alternative solution.
sjoerrigter
May 23, 2009

Sunil Rawat on 22 May, 2009 wrote: You can change the css styes to position the next and prevous link anywhere you want.
wirpo032
May 23, 2009

Thx, really...should be more people like you writing such tutorials. Thumbup
Robert
May 25, 2009

Hello Allen, first up great tutorial. I'm working on my site and I'm using your slider. On my photography page I would like to display 2 rows of thumbs instead of one, take a look at my photography page and you will see how i want it to display. If I can adjust the height of the slider to show both rows of thumbs that would be great. Thanks again.
Lorenzo
May 26, 2009

If I use $.get("images.html", function(data) { jQuery(data).appendTo('#slider'); }); to dynamically add the html <ul>....</ul>, the plugin just load the first image. Why is that?
_Undefined
June 5, 2009

Would it be possible to overlay text on top of images in the slider? I've tried a few different ways to go about it using css and a separate slider with just text, but can never get the text to be on top of the image.
Mike Lewe
June 9, 2009

I'm back. Seems I had some sort of server bug. Excellent Plugin! Works perfectly.
Umar Zaman
June 11, 2009

Hi, Thanks for this slider its really cool i am having small problem that it keeps sliding even there are no images. And also my each li image is 70px X 79px... Please Help Thanks
Jonathan
June 15, 2009

I installed the plugin and it seems that the PrevButton and NextButton don't work in Safari and Chrome. Can anybody help please? Example www.iphoneapplab.net
Daveed Flexer
June 15, 2009

To Jonathan, I have had no problem with this plug-in in safari/chrome (webkit browsers). I am using the text version of prev - next and this is all the CSS I have /* Easy Slider */ #slider ul, li { margin:0; padding:0; list-style:none; } #slider li { /*define width and height of list item (slide) entire slider area will adjust according to the parameters provided here*/ width:400px; height:300px; overflow:hidden; } span#prevBtn { font-size:0.75em; position:absolute; right:210px; bottom:20px; } span#nextBtn { font-size:0.75em; position:absolute; right:130px; bottom:20px; } /* // Easy Slider */
Guillermo horno
June 15, 2009

Thanks! very useful piece of code. Just one suggestion, I've used it to make a home page slider and inside those slides, I have another <ul> to list some items. The code changes the width of the ul inside the slider div (that's needed for the main <ul>, but not for the inside ones). I've changed the selector on lines 69, 118 and 124 to be $("ul:first",obj) instead of $("ul",obj). Also added some changes to the css <li> attributes, so it doesn't change the widths of the inside <li> : #slider li ul li{ width:auto; height: auto; } Just an humble suggestions, warm regards Thanks
nico4peace
June 16, 2009

Hello, Is it possible that the slide automatically? if so what is the command to add
Lincoln
June 17, 2009

Hello, Very nice work with this amazing plugin! I had to use more than one slide per page and I had problems with the following line: obj = $(this) To fix that I've added a `var' before the `obj' declaration. I did it to ensure that obj will be available only in the local scope, instead of global one. HTH
Paul
June 17, 2009

Any update on support for nested lists? I specifically want to be able to nest <ul>'s inside of the easySlider's <li> sliders. mine goes crazy as people have previously mentioned. for now, I guess I can try and not use an unordered list for my content....
Vishal
June 18, 2009

I had run into problem when trying to have two instances of this slider in the same page. Can you please give me a solution on how to add two working slider instances in a single page with no script conflicts please?
Adrian G
June 19, 2009

Great slider script looks great on my website. Has anyone found a way to make it return to the original position by moving forwards rather then backwards? 1-2-3-4-5-1-2-3-4-5 rather then 1-2-3-4-5 <-<-<-<- 1-2-3-4-5 thanks.
Empee
June 26, 2009

Hi, I saw a few questions about how to put 2 or more images into one page / slide. I'm a noob but this is easy. The slider uses <li></li> to indicate where an item starts and ends. so put more items in one <li> and you got it. I use ASP.NET Repeater where item is <li>something and AlternatingItem is something</li> hope I helped someone, anyway, good thing this slider.
james
June 27, 2009

Hi, Cool slider. But I can't seem to change the width of the li that the image or content goes in. i tried changing all the widths in the css i could find, but the visible window that shows the content always stays the same size. Is there an easy way to basically just make the content area slightly thinner ? thanks james
Vernon
June 29, 2009

I'm a noob with jQuery. I'm trying to use this on one of my projects but I can't get the buttons to work. What am I doing wrong? http://www.perfectsoftware.com/V3/html/text.php
dynagirl
June 29, 2009

Thanks for this very easy solution! Question? How do I center the images that I'm using within my div?
adibu
June 30, 2009

How can I change the order of auto-vertical? Now is: 1-2-3-4-5-1-2-3-4-5 What I want is: 1-2-3-4-5-4-3-2-1 Is this possible?

Sorry, the comment form is closed at this time.