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