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.
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!
Martin Muehl 6 Jan, 2009
cssglobe 6 Jan, 2009
V1 6 Jan, 2009
Chris Barnett 6 Jan, 2009
cssglobe 6 Jan, 2009
crs 6 Jan, 2009
andreas 6 Jan, 2009
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. 6 Jan, 2009
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 6 Jan, 2009
Brenelz 6 Jan, 2009
Is there any way switch content / images after a set time limit?
Brandon Cox 6 Jan, 2009
Al 6 Jan, 2009
Pretty good for your first one :)
mbh 6 Jan, 2009
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 6 Jan, 2009
Thanks for the comment.
cssglobe 6 Jan, 2009
Ozh 6 Jan, 2009
Graeme Mac 7 Jan, 2009
Fabryz 7 Jan, 2009
Matt Williamson 7 Jan, 2009
Raymond Selda 7 Jan, 2009
Gerd 7 Jan, 2009
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 7 Jan, 2009
I am preparing several full styled "skins" for my next article so stay tuned :)
Thanks!
Janko 7 Jan, 2009
Elena 7 Jan, 2009
Richard Standbrook 7 Jan, 2009
Jason Judge 7 Jan, 2009
renjunlong 7 Jan, 2009
Designer 7 Jan, 2009
komax 7 Jan, 2009
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 7 Jan, 2009
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
Mayco 7 Jan, 2009
Direto do Brazil!!!!
ignari 7 Jan, 2009
$('#prevId, #nextId').attr('href', 'javascript:void(0);');
To avoid writing that directly in the content.
Ignacio
ignari 8 Jan, 2009
Elvis 8 Jan, 2009
I'll definitive will use this for one of my next projects!
genia 8 Jan, 2009
David Toms 8 Jan, 2009
.. or scroll-to?
Abhisek 9 Jan, 2009
stalkerX 9 Jan, 2009
Here is my work: jQuery Slider Player (Page in German): http://playground.ebiene.de/1052/jquery-slide-player/
germo 9 Jan, 2009
Workingman 9 Jan, 2009
komax 9 Jan, 2009
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 9 Jan, 2009
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 9 Jan, 2009
Joseph Pecoraro 10 Jan, 2009
http://bogojoker.com/easySlide/
Joseph Pecoraro 10 Jan, 2009
@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 10 Jan, 2009
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 10 Jan, 2009
Joshua (Bada Bing!) 10 Jan, 2009
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 10 Jan, 2009
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 10 Jan, 2009
$(document).ready(function(){
$("#slider_alpha").easySlider({
prevId: 'btnPrev1',
nextId: 'btnNext1'
});
$("#slider_omega").easySlider({
prevId: 'btnPrev2',
nextId: 'btnNext2'
});
});
Davor Peic 11 Jan, 2009
Thanx Alen!
Brian 11 Jan, 2009
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 12 Jan, 2009
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 13 Jan, 2009
Kadir GUNAY 13 Jan, 2009
5antom 13 Jan, 2009
http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu/
ne2d 13 Jan, 2009
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 13 Jan, 2009
Suzy 15 Jan, 2009
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 15 Jan, 2009
How do we style the previous and next to be buttons (instead of text)?
Thanks
Tim 16 Jan, 2009
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 16 Jan, 2009
:)
Max 17 Jan, 2009
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 17 Jan, 2009
Thanks!
Max 18 Jan, 2009
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 19 Jan, 2009
"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 20 Jan, 2009
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 20 Jan, 2009
<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 20 Jan, 2009
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 21 Jan, 2009
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 21 Jan, 2009
cssglobe 21 Jan, 2009
East 21 Jan, 2009
Or is that already possible? I can't get it right.
Nandx 21 Jan, 2009
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 21 Jan, 2009
East 21 Jan, 2009
Images use instead of text 22 Jan, 2009
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 22 Jan, 2009
jeroen 23 Jan, 2009
Is it also possible to use other effects? I want to use the Fade method is this easy to adjust?
Adeline 24 Jan, 2009
Dee 25 Jan, 2009
Nandx 25 Jan, 2009
cssglobe 25 Jan, 2009
Jose Castillo Areiza 26 Jan, 2009
cam filmi 26 Jan, 2009
sergey 26 Jan, 2009
thx
zarouk 26 Jan, 2009
Great plugin ... thank you.
Waiting for the new version with the autoscroll function to use it.
Geoff 27 Jan, 2009
Nicolas Borda 27 Jan, 2009
Nicolas Borda 27 Jan, 2009
@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 28 Jan, 2009
Jason 29 Jan, 2009
cssglobe 29 Jan, 2009
cssglobe 29 Jan, 2009
Sinister Edd 10 Feb, 2009
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 11 Feb, 2009
danreb 14 Feb, 2009
Jennae Petersen 19 Feb, 2009
$(document).ready(function(){
$("#slider").easySlider();
});
Miles Tinsley 22 Feb, 2009
<script>
$(document).ready(function(){
$("#slider").easySlider();
});
</script>
nobull 22 Feb, 2009
u need to write an html tag
<script language="javascript">
$(document).ready(function(){
$("#slider").easySlider();
});
</script>
preferably in the head tag
kapil jagtap 25 Feb, 2009
Val 25 Feb, 2009
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 25 Feb, 2009
http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
:-)
jBay 26 Feb, 2009
word!
Zend 26 Feb, 2009
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 3 Mar, 2009
I looked into the animate function but I cannot call that from outside EasySlider. Any thoughts?
Peter 4 Mar, 2009
"How does it all work"
span Previous button shoul be prevBtn instead of prevId i think ?
Roki 4 Mar, 2009
<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 10 Mar, 2009
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 10 Mar, 2009
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 11 Mar, 2009
http://www.lime-five.com/wordpress/wp-content/themes/theme/js/test.html
Peter 11 Mar, 2009
I changed all ul-references in easySlider.js to ol and changed <div id="slider"><ul>..</ul> to <div id="slider"><ol>..</ol>
netmastan 12 Mar, 2009
Regards
Joachm 12 Mar, 2009
So one finishes slding before the other. Any help Please!
Thanks
SK 15 Mar, 2009
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 15 Mar, 2009
ortak miras 18 Mar, 2009
Noski 18 Mar, 2009
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 19 Mar, 2009
Tiago Celestino 20 Mar, 2009
hugs!
Jason Geyer 22 Mar, 2009
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 23 Mar, 2009
Andrei 23 Mar, 2009
Any ideas?
Thanks
Tim 26 Mar, 2009
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 26 Mar, 2009
Drew 27 Mar, 2009
Charlie Rogers 31 Mar, 2009
Daniel Craig Jallits 3 Apr, 2009
<?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 15 Apr, 2009
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 16 Apr, 2009
Very easy to understand/use, leightweight and fullfilling my requiruements for a content slider.
Thanks,
Jean Marie
Zdeněk Doležal 17 Apr, 2009
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 20 Apr, 2009
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 25 Apr, 2009
Mike Lewek 27 Apr, 2009
Mike Lewek 27 Apr, 2009
peter 28 Apr, 2009
Mike Lewek 29 Apr, 2009
Bakadesu 1 May, 2009
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 4 May, 2009
Ankit Sabharwal 5 May, 2009
anyways great tutorial !!
Dimitris 10 May, 2009
cmd 15 May, 2009
Sjoerrigter 16 May, 2009
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 17 May, 2009
Regards
Hussain
ayoub 19 May, 2009
Jonathan 19 May, 2009
Mike 20 May, 2009
What must be changed in the code for this option?
Sven 20 May, 2009
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 22 May, 2009
Plz anyone know the solution for this or any alternative solution.
sjoerrigter 23 May, 2009
You can change the css styes to position the next and prevous link anywhere you want.
wirpo032 23 May, 2009
Robert 25 May, 2009
If I can adjust the height of the slider to show both rows of thumbs that would be great. Thanks again.
Lorenzo 26 May, 2009
$.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 5 Jun, 2009
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 9 Jun, 2009
Excellent Plugin! Works perfectly.
Umar Zaman 11 Jun, 2009
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 15 Jun, 2009
Daveed Flexer 15 Jun, 2009
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 15 Jun, 2009
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 16 Jun, 2009
Is it possible that the slide automatically?
if so what is the command to add
Lincoln 17 Jun, 2009
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 17 Jun, 2009
Vishal 18 Jun, 2009
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 19 Jun, 2009
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 26 Jun, 2009
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 27 Jun, 2009
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 29 Jun, 2009
http://www.perfectsoftware.com/V3/html/text.php
dynagirl 29 Jun, 2009
adibu 30 Jun, 2009
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?