written on:4 Aug, 2009 by Alen Grakalic

Easy Slider 1.7 - Numeric Navigation jQuery Slider

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

I got a lot of emails and feedback about my easySlider plugin, thank you all for that. However, I have to apologize to all of you who sent emails asking for a little help with implementation or small bug fixes. I simply don't have the time to answer all of your emails. I wish I do.

What I am presenting you today is an easySlider update with 2 new features. When going through your feedback I noticed 2 feature suggestions appearing very often:

  • numeric navigation (as an alternative to next/previous buttons)
  • continuous scroll instead of jumping to the first (or last) slide

So, that's what I implemented in this new version. Now you have the option to choose between classic previous/next navigation or to use a numeric "pagination" style navigation.

Also, your suggestion about continuous scroll made most sense, it is kind of annoying when you have many slides and have to wait for all of them to scroll back to the first one. I had to include it in this version.

Download easySlider 1.7

I suggest that you read about previous versions in order to understand better how it works:

easySlider version 1.0

easySlider version 1.5

Options

So, let's go through all of the options. For your convenience I have written the options from previous version of this plugin, so you can have it all in one place. Here they are with their default values:

prevId: 		'prevBtn',
prevText: 		'Previous',
nextId: 		'nextBtn',	
nextText: 		'Next',
controlsShow:		true,
controlsBefore:	'',
controlsAfter:		'',	
controlsFade:		true,
firstId: 		'firstBtn',
firstText: 		'First',
firstShow:		false,
lastId: 		'lastBtn',	
lastText: 		'Last',
lastShow:		false,				
vertical:		false,
speed: 		800,
auto:			false,
pause:			2000,
continuous:		false, 
numeric: 		false,
numericId: 		'controls'

prevId

Id attribute for "previous" button. Default value is "prevBtn".

prevText

Inner text for "previous" button. Default value is "Previous".

nextId

Id attribute for "next" button. Default value is "nextBtn".

nextText

Inner text for "next" button. Default value is "Next".

orientation

Sliding can be horizontal or vertical. Horizontal is default and if you want vertical set this to 'vertical'.

speed

Animation speed in milliseconds, default value is 800.

controlsShow

By default set to true, but if set to false it will not add any controls. It can be used with auto scroll when you want to disable user interaction.

controlsBefore and controlsAfter

In case you want to add some additional markup to gain more control over buttons you can do so by using these parameters. Check out the demo where I use these options.

controlsFade

By default set to true. If set to false it will disable button hiding when slider reaches the end.

firstShow and lastShow

These parameters hide (or show) "go to first" and "go to last" buttons.

auto

This option enables automatic sliding. If you set it to true the sliding will automatically start and continue to perform untill user clicks one of the buttons.

pause

This option is set in milliseconds and it represent the duration of each slide when plugin is set to auto sliding.

continuous

If set to true clicking the next button when the slider reached the end will simply continue showing all of the slides again with continuous motion. Combining this option with auto (both set to true) you'll get endless animation.

numeric (NEW!)

If you set this option to true you will get numeric navigation instead of next/prev buttons. Plugin will create an ordered list just after the slider div. Ordered list will have the exact number of elements as the slider. Clicking on each of the number will make the animation jump to a certain slide.

numericId (NEW!)

This option defines id attribute for the ordered list. You should use this id to select and style the list with CSS.

Demos

I have 3 new demos here:

Continuous slide

Numeric navigation

Multiple slides

Here you go. If you have any more suggestions, please send them to me and I will consider of implementing them in the next plugin version!

About the author:

cssglobe's image Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of Easy front-end framework.
To get in touch, visit Alen's personal page, follow Alen on Twitter or become a Facebook friend.

Enjoyed the article?

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

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

Read more! Here are our most recent articles:

View All Articles

Comments

  1. Mark on 4 Aug, 2009 wrote:

    Awesomeness!

    Continuous slider rocks!
  2. Andris on 4 Aug, 2009 wrote:

    That's absolutely awesome! Thanx for sharing it.
  3. Manu on 4 Aug, 2009 wrote:

    Pretty nice updates, Alen! I like the numeric navigation and going to use it in my next template, but I don't know how to style the active number? Is there any id or class within the script defined?
  4. Michael Caputo on 4 Aug, 2009 wrote:

    Thanks for this!
  5. cssglobe on 4 Aug, 2009 wrote:

    @Manu: yes, the active numeric button is added a class "current". You can see how I styled the "current" button in my examples.
  6. Daveed Flexer on 4 Aug, 2009 wrote:

    Great plug-in thanks.
    I was wondering if there is a way to paginate the "screens". IE update URL and have this new URL be such that when entered into browser window it opens appropriate "screen"/

    I've made some attempts to customize, but without much success yet.

    DF
  7. existdissolve on 4 Aug, 2009 wrote:

    Glad to see the numeric paging added to this great plug-in. I implemented something similar on my own, but glad to see it's been included.

    Here's the site I used it on:

    http://megandjason.com
  8. Austin Siewert on 4 Aug, 2009 wrote:

    Thanks for sharing, awesome improvements!
  9. Manu on 4 Aug, 2009 wrote:

    Thanks Allen, I already styled the current number! Is it possible, to remove the outside div (#slider) and set the id "slider" directly to the unordered list? Oh, and a packed version of that script would be fine!
  10. Ben on 4 Aug, 2009 wrote:

    Great script, thank you! Is it allowed, to sell the easySlider within a html template (on themeforest)?
  11. Josiah Katz on 5 Aug, 2009 wrote:

    I am trying to put a transparent PNG "frame" in front of the slider, and I am stumped on how to go about this. I've tried a couple different methods, but I'm just stumbling around. Any suggestions
  12. BBC Marketing on 5 Aug, 2009 wrote:

    i love this plugin. but them i have to add a lot of images. and i want to show a random image on a specific page. Is there a tag or something to add in the code to achieve this? thanks
  13. Michael on 5 Aug, 2009 wrote:

    Gorgeous script!

    But i stumble over a small bug and i hope i could get some help.

    If you load a great amount of pictures and not all images are preloaded before you hit the first time the next button.
    These Images will not load completely or they wont load at all.

    Any solution for this ?

    Thanks in advance!
    Michael
  14. Chame on 6 Aug, 2009 wrote:

    Very nice.

    Can we have both numeric and button navigation at the same time?
  15. Pandamo on 6 Aug, 2009 wrote:

    I thank:
    var w = $("li", obj).outerWidth();
    better
    var w = $("li", obj).width();
    ???
  16. Pandamo on 6 Aug, 2009 wrote:

    BTW,IN the next update,can this control number of the visible "li"?
    This is only show one "li"....
  17. Cain on 6 Aug, 2009 wrote:

    Hi, I would like to show show both Next/Prev buttons + numeric values? Any solution?

    Perhaps give buttons a show :false/true value as well.
  18. Cain on 6 Aug, 2009 wrote:

    @Chame
    I did get the numeric and buttons to show by slightly modifying the JS. However ran into a bug; for example: lets say there are 5 images. If I click on the NUMERIC "#4" then click on the NEXT BTN, the image would keep scrolling to invisible space. Will take 10+ seconds before it reloads to #1 image.

    Perhaps the author has a better solution.
  19. Roger on 6 Aug, 2009 wrote:

    Hi great slider!

    But when I try vertical true, it fails and flips on the demo download.

    Also it would be great if we could have the option for some nice fade in fade out.

    Like this:

    onBeforeSeek: function() {
    this.getItems().fadeTo(300, 0.2);
    },

    // when seek ends resume items to full transparency
    onSeek: function() {
    this.getItems().fadeTo(300, 1);
    }

    Cheers!
  20. steve on 6 Aug, 2009 wrote:

    great plugin but i'm having a problem loading an ajax page with this plugin on it.

    goto this page (http://sickman.info/v2/#home) and it works when first loading. click on another menu item, and then click on "steve sickman design" to go back to the home page. the slider div and ul get their width and height set to 0 and none of the slides show up.

    now on this page (http://sickman.info/v1/#home) the slider is manually started so it works when repeating the above steps

    any help is appreciated
  21. Kannan.BKN on 6 Aug, 2009 wrote:

    hey its really cool, but i want to slide or scroll 4 thumb nail sized images at a time and if i click next, 1st image only should move and hide and other 3 should follow that and scroll left.. for info check http://books.rediff.com/
    is this possible in this version plz reply asap..

    thanks for this cool slider.
  22. Martin on 6 Aug, 2009 wrote:

    Your work is really cool, i use it at http://www.trachtenstrip.de
    But i'd like to add some pause- and play-button (with active-status). Is this possible (or maybe a feature for next version)?
  23. Terry on 6 Aug, 2009 wrote:

    Great to see how you have continued to improve the easySlider plugin!
  24. eastwood on 7 Aug, 2009 wrote:

    Struggled with find a solution to having the slider stop when you mouseover it AND keep the buttons working. Here is what I came up with.

    Add this around line 141. Just before the animate function.
    $('#slider').mouseenter(function(){
    animate("stop",true);
    });

    Add this around line 158. You adding the case for when you call the stop dir.
    case "stop":
    t = t;
    break;
  25. Mr Ye on 8 Aug, 2009 wrote:

    Great plug-in and great update - much appreciated Mr Alen :) Cheers
  26. Umar on 8 Aug, 2009 wrote:

    hello,
    any one i want to use my keyboard arrow keys how can i use them.
    Thanks!
  27. Mathias on 9 Aug, 2009 wrote:

    This is amazing, thanks! :)
  28. THE MOLITOR on 9 Aug, 2009 wrote:

    This is simply amazing. I'm using this on my home page. I would be very interested in having the ability to display both numeric AND previous/next buttons.
  29. Michel S on 10 Aug, 2009 wrote:

    Ohh, this is beautiful. Thank you for sharing.
  30. Nick Whitehouse on 10 Aug, 2009 wrote:

    This is a great plugin! how about the option to display the image name also? I'm using PHP to automatically load every image from a folder into the <li></li> list, which makes it a very painless image viewer, just upload to the folder and sorted... although names/titles would add another dynamic!
  31. Matt Emery on 10 Aug, 2009 wrote:

    An addition to Eastwood's code...
    Pause the slideshow on mouseover and resume the slideshow on mouseout.

    Add this around line 141. Just before the animate function.
    $('#slider').mouseenter(function(){
    animate("stop",true);
    });
    $('#slider').mouseleave(function(){
    animate("next",true);
    });

    Add this around line 158. You adding the case for when you call the stop dir.
    case "stop":
    t = t;
    break;
  32. eric on 11 Aug, 2009 wrote:

    I've used this in a few projects, so thanks.

    I was thinking about putting a counter like "Slide 1/5" near the back and prev buttons. Maybe another option to include in your next version?
  33. kelly on 12 Aug, 2009 wrote:

    Great script! Nice and easy to customize. Thanks!
  34. Cameron on 13 Aug, 2009 wrote:

    If you have a theme with more than one instance of jquery being called, it won't work in wordpress.
  35. Mohsin Rafique on 13 Aug, 2009 wrote:

    Great Work. I really appriciate your effort.
    Well i have a query regarding to Easy Slider and it is about is it possible to control the opacity of the slider image. I mean onload the loade images in slide show have 80% opacity and when mouse move over the slider image, it's opacity becomes 100%.
    FOr reference what feature i am looking in your code, you can see from this URL http://www.andrewplummer.com/portfolio/

    I hope i will have a positive response from your end.

  36. Leannekera on 14 Aug, 2009 wrote:

    Wonderful script, thank you so much!
  37. Karar A. on 14 Aug, 2009 wrote:

    Amazing and nice , you saved me alot of time good job mate
    and Thank you very much.
  38. John McMullen on 14 Aug, 2009 wrote:

    Taking from Eastwood and Matt, this should be implemented in the next release:

    Add an additional default property around line 57 (end of the list):
    hoverPause: false (be sure to add the comma to the property above it)

    Around line 141 add this entire block of code:
    if (options.hoverPause === true){
    $('#slider').mouseenter(function(){
    animate("stop",true);
    });
    $('#slider').mouseleave(function(){
    animate("next",true);
    });
    }

    Then add the case "stop" as mentioned above, copied here:
    case "stop":
    t = t;
    break;

    This way it integrates into the plugin and you can turn it on/off.
  39. John McMullen on 14 Aug, 2009 wrote:

    Sorry to bog up the comments, but a slight correction on my previous post. Replace the if statement with this so it'll recognize whether or not you have it sent to continuously change:

    if (options.hoverPause){
    $('#slider').mouseenter(function(){
    animate("stop",true);
    });
    $('#slider').mouseleave(function(){
    if (options.continuous){
    animate("next",false);
    } else {
    animate("next",true);
    }
    });
    };
  40. zac on 14 Aug, 2009 wrote:

    HI, great plug-in, thanks for sharing! I have noticed a few requesting this feature and I was wondering if anyone was able to implement it. That is, when the user clicks to move the slider manually it loses its auto play ability. Has anyone figured out a way to have that come back instead of switching to completely manual ?
  41. sally on 15 Aug, 2009 wrote:

    how can i change the numbes buttons to text
    I want to use this slider for boxes of information
    eg. How When Where
  42. Robert on 17 Aug, 2009 wrote:

    Hi,
    Are there problems with Lightbox and Easyslider together in one page?

    Thanks,
  43. Matt Emery on 17 Aug, 2009 wrote:

    Thanks for the update John, that works much better.
  44. Jeremy Karney on 17 Aug, 2009 wrote:

    Is there any way to make custom elements control the slider? See the 4 boxes on the grey ribbon. I want the slider to advance to the corresponding box upon clicking one of those boxes.

    I tried to use the same tags as the numerical navigation, but it did not pick it up, I am assuming because it is outside of the slider div.

    Here is the site:
    http://thenearsky.com/sb/
  45. Luc Pestille on 17 Aug, 2009 wrote:

    One bug / feature I've found that could do with being an option - when you have numeric navigation set up, clicking on one of the links takes you to that item, but the slideshow then stops forever. I'd like it to be able to carry on with the animation, after the pause...

    Thanks - great lightweight slider otherwise!
  46. Felipe Lima on 18 Aug, 2009 wrote:

    Hi! I needed to consume events for image change in the slider, so I changed a bit the code to add this functionality.
    In the function adjust(), add the following line to its third line:

    options.onChange(t);

    Then, call the slider with an additional onChange option:
    $("#slider").easySlider({
    (...)
    onChange: onChangeImg
    });

    function onChangeImg(index) { /* do something on image change */};

    The function receives the zero-based image index. Maybe you'll want to add this functionality to the next version, since it's fairly small!

    Thanks and keep the nice work!!!

    Felipe
  47. Edith on 18 Aug, 2009 wrote:

    Love the slideshow! Also works well with text overlays.

    In HTML:
    <li><a href=""><img src="images/slide.jpg" alt="" /> <span> text goes here </span> </a> </li>

    In CSS:
    #slider li span {display: block; width: Xpx; height:40px; background: transparent url(../images/slide.png) repeat 0 0; margin-top: -40px; position: relative; }

    And voila, you have a text overlay which slides with the images.

    Many thanks, Edith
  48. Arjun Mehta on 18 Aug, 2009 wrote:

    Thanks for your development on this!

    I noticed a bug for the vertical option on line 134 of the js file:
    $("ul",obj).css("margin-left",(t*h*-1));

    should be:
    $("ul",obj).css("margin-top",(t*h*-1));

    I was perplexed as to why my list was sliding over to the left! hah.
  49. Stephen on 19 Aug, 2009 wrote:

    Refrain from wrapping or using align="center" on the slider div because it stops the slider moving to the next image in Safari and Chrome.

    A solution to centering the content if you have different size images would be in the CSS:

    #slider ,#slider2{
    text-align: center;
    }
  50. Ian on 20 Aug, 2009 wrote:

    Any possibility of releasing two different files, one with the MIT License included at the beginning and one referencing the GPL license? None of these are included in the zip file, just referenced in the source code.
  51. Mike on 20 Aug, 2009 wrote:

    Love the script, however when I use it with supersleight (the jquery plugin for making .png's display with transparency in IE6) the slides in the easySlider aren't hidden, the .png's are visible on upcoming slides.

    Any help would be much appreciated!
  52. marujo on 20 Aug, 2009 wrote:

    great job! how can i implement this tool on wordpress? its a plugin? its very cool. thanks
  53. Jason on 21 Aug, 2009 wrote:

    Nice script here. It offers tons of variation in a slider. Most sliders are just scrolling through lists without controls. Controls make this stand apart from the rest.

    I have been implementing this scroller into wordpress, I'll share the code with you when I get done, I have been trying to use small thumbnails to navigate through the list, but am not quite sure how you are getting the value for each list item. When you call NEXT do you use child methods to navigate through the list? I tried adding a custom ID to each item, but to no avail... What I am trying to do is something to this effect: http://www.fuseboxtheatre.com/
  54. PattyR on 21 Aug, 2009 wrote:

    When attempting to create multiple sliders on one page with both sliders using numeric controls, the numeric controls all lump together in one ordered list. It is creating a <ol id="controls"> for each slider, but the actual controls only show up in the first ordered list on the page.

    This appears to be an issue with the javascript, not the css. Unless I am missing something (it has been a long day).
  55. Paolo on 21 Aug, 2009 wrote:

    Very good and simple plugin.
    Is possibile to use numeric with simple next/prev button ?
  56. Chris on 21 Aug, 2009 wrote:

    In reply to ParryR. I also had this problem. The solution is to define the navigationId in your Jquery document ready call.

    $(document).ready(function(){
    $("#slider1").easySlider({
    continuous: true,
    numeric: true
    });
    $("#slider2").easySlider({
    continuous: true,
    numeric: true,
    numericId: 'control2'
    });
    });

    Whatever you call your second slider numericId you'll need to duplicate your CSS for it. Hope that makes sense,
  57. Pierre on 21 Aug, 2009 wrote:

    Great Job!!
    A idea for the next release : the possibility to fit numeric controls above the slider ;-)
  58. PattyR on 21 Aug, 2009 wrote:

    Makes perfect sense, thanks Chris.
  59. gerafik on 21 Aug, 2009 wrote:

    hello

    How to show images side by side without border and white spaces - when I have small pictures, smaller than container dimension??
    (I want to see others neighbouring images near selected images)

    thanks for help
  60. Pierre on 21 Aug, 2009 wrote:

    It seems that vertical and continuous mode doesn't work correctly...

    It would nice if the numeric control choice the shortest way between 2 slides (example : slide 9 is active, I click on 2 -> it should go on slide 1 then slide 2, not get back on slide 8, 7, ... til slide 2)

    Great job anyway :-)
  61. wedhaaf on 23 Aug, 2009 wrote:

    I love it. But can it display a caption inside of each image?
  62. Dean on 24 Aug, 2009 wrote:

    @gerafik: You should be able to change the overflow setting on your container and have it show other slides, I think that will only show slides AFTER the active one though, You will probably need to edit the js to alter that behaviour...


    Amazing work on this plugin it's really easy to use and works perfectly (apart from the vertical setting!!) I love it! Thanks for sharing.
  63. gerafik on 24 Aug, 2009 wrote:

    @Dean: Thanks for help, but it still doesn't work. Overflow setting doeasn't matter for showing, I can delete all, or change for 'visible' or 'auto' - and it still the same, but...
    I check that if I delete settings "dimension height" in "#slider li, #slider2 li" It show me correctly photos - side by side, but It wrong calculate right photo in right place, there is some bug... maybe in js.
    Pleas check: http://www.gerafik.pl/test/test.php

    Any idea for solution...?
  64. Ollie Wells on 24 Aug, 2009 wrote:

    @Chame @Cain and to the author!

    I too have managed to get both numbers and navigation arrows showing with some hacking of the code.

    Is there a nicer way of doing this?

    Im having the same issues as Cain where it scrolls off the page then returns 10 seconds or so later to the first image.

    Help!! :)
  65. Fernando on 24 Aug, 2009 wrote:

    Is possible to use texts instead of numbers (in numeric navegation) ?
    Thanks a lot
  66. Chris on 24 Aug, 2009 wrote:

    @Chame @Cain @Oliie Wells and to the author!

    I found a solution for our problem.
    Try to modify the animate-function from "default: t = dir;break;" to "default:t = parseInt(dir);break;"
    Now it works fine with numbers and navigation arrows together.
  67. James on 25 Aug, 2009 wrote:

    I am trying to use this but having a few issues:

    1) I need it to scroll vertically, but when I set it to continuous at the same time I have problems... seems to skip a slide or add in a blank one... this only happens when both are set to true...

    2) I want the buttons to be placed at the top and bottom of the slide as opposed to the left and right... how can I get them to line up that way as if they look like up and down arrows... I understand I will have to change the arrow graphics...

    Great script... and thanks to Arjun Mehta for the bug fix.
  68. Ollie Wells on 25 Aug, 2009 wrote:

    @Chris (on 24 Aug, 2009).

    Sir, you are a genius. Awesome!
  69. Ollie Wells on 25 Aug, 2009 wrote:

    Does anyone know how to add some easing to the animation ?
  70. Ollie Wells on 25 Aug, 2009 wrote:

    If anyone wants to see it in action,

    http://www.twentysixtwelve.co.uk/

    :)
  71. Tommy Arnold on 25 Aug, 2009 wrote:

    I have been looking for this for hours, you should try and put some keywords like javascript image slider, left right image slider, simple image rotator so google can find you.
  72. Anita on 26 Aug, 2009 wrote:

    Easyslider works very well with text and html inside the slides, as well as images. The only thing to be wary of is using lists inside a slide - these seem to add extra empty slides to the end of the list.

    (Actually they just increase the width of the list so that it looks as though there are empty slides.)
  73. Andrew Philpott on 26 Aug, 2009 wrote:

    thanks for this awesome plugin! i had been trying to use similar ones for a while, but found that yours is by far the easiest.
  74. Jamie on 26 Aug, 2009 wrote:

    Such a great image slider and so easy to use. Thank you.
  75. Cain on 26 Aug, 2009 wrote:

    Anyway to not load the hidden images until its click to?
  76. Kyle Florence on 26 Aug, 2009 wrote:

    Thank you for this, it is much cleaner and better organized than the Coda Slider.
  77. Kyle Florence on 26 Aug, 2009 wrote:

    Some suggestions:

    - Make it possible to use both the numeric navigation and the previous/next buttons (this is an easy fix).

    - Add an easy way to switch between putting the navigation items above or below the slider content (should also be easy).
  78. Kyle Florence on 27 Aug, 2009 wrote:

    Since these suggestions were rather simple to do, I've gone ahead and edited version 1.7 to add these new features (along with the option for custom easing animations using the jquery easing plugin). Also removed the javascript:void(0) references in the link and replaced them with anchors (#) and had the click events return false (better practice). You can download it here:

    http://archive.kflorence.com/projects/easySlider/jquery.easySlider-1.8.js
  79. Steve on 27 Aug, 2009 wrote:

    Thanks for a great slider. I got everything working, but I have one problem. This is probably a stupid question, but any help would be appreciated. When I click on the next or previous button, there is blue dotted line that forms around the button and across the page. How do I get rid of this blue dotted line?
  80. web ink on 27 Aug, 2009 wrote:

    Is there anyway to make the slider images to move from left to right rather than right to left? I have tried a few things but they failed miserably with the slides jumping back and forth. If not, thats fine but it would be cool to be able to make the slide go in either horizontal direction.

    Lastly, thankyou for making such a good and easy to use slider script available.
  81. Kyle Florence on 27 Aug, 2009 wrote:

    Vertical bugs fixed here:

    http://archive.kflorence.com/projects/easySlider/jquery.easySlider-kf.js
  82. Helen P on 27 Aug, 2009 wrote:

    This is a fantastic script so easy to implement Thank you.

    Is there a way to restart the autoplay after a next/previous button has been clicked?
  83. Ryan G on 27 Aug, 2009 wrote:

    Has anyone else (besides me) found that if the slider div is inside a div that starts out as "display:none;" (such as a container div that is only displayed after the click of a button), then the ul in the slider doesn't grab the widths of the list items? And so it doesn't work.

    It seems to me like this part - $("ul",obj).css('width',s*w);
    - is being prevented from working... and that the display:none style is the culprit. However, it'd be rad if someone smarter than me could replicate/verify/fix it!
  84. Becca P on 27 Aug, 2009 wrote:

    Thanks so much for this slider! It was really easy to integrate and the configurable options are just what I needed.

    @John McMullen - Thanks for the added pause-on-hover effect - also exactly what I needed!!!
  85. Matthew D on 27 Aug, 2009 wrote:

    Thanks for this,
    I made a slight modification that others may find useful, it uses the size of the div element rather than the individual li's, this is useful for when you want content to slide in and slide out without others li's showing regardless of dynamic width.

    Modify the starting of this.each(function(){
    to look like the following to achieve this:
    var obj = $(this);
    $('li',obj).each(function() {
    $(this).width($(obj).width());
    });
    var s = $("li", obj).length;
    var w = $(obj).width();
    var h = $("li", obj).height();

    Technically the var w = $(obj)...... line isn't a required change but it is a little quicker as there's less DOM traversal.
  86. Ryan G on 28 Aug, 2009 wrote:

    Matthew, that seems along the lines of what I need to do to fix my site. But it didn't fix my problem (I've since reverted back to the original code). For some reason the slider div's height and width is being overwritten in the javascript to be "width: 0px; height: 0px;"

    I have it working here: http://www.blueskiesabove.us/pgrls/foo2.html
    but once I add onclick behavior it stops working: http://www.blueskiesabove.us/pgrls/foo.html

    Any chance you could look at that? I'm not proud to say that I've been working on this for a couple weeks...
    I've tried a few different ways of coding the onclick. The current version seems like a slight improvement. But it's still not there. I think the slider div is still being affected by how the "butthead" div starts out as display:none;.... you can email me at master.cob gmail, if you feel like helping ;) thanks.
  87. Vic on 28 Aug, 2009 wrote:

    Great job. Thank You :)
  88. Marc on 28 Aug, 2009 wrote:

    Is there a way to create a button manually outside the slider that can cause the slider to go to a particular slide (li)

    Sorry if this has been asked before
  89. Kyle Florence on 28 Aug, 2009 wrote:

    The file below has a fix for nested list items -- no longer causes everything to break when used within the normal list structure.

    http://archive.kflorence.com/projects/easySlider/jquery.easySlider-kf.js
  90. Kyle Florence on 28 Aug, 2009 wrote:

    Full list of new features in my modified version:
    - Fixed nested lists breaking the plugin.
    - Removed javascript:void(0) calls from anchor tags (replaced with # and return false;)
    - Fixed vertical sliding bugs when continuous is set to true
    - Fixed vertical sliding bug that caused vertical slides to shift to the left
    - Added the option to have both numeric navigation and first/previous/next/last buttons at the same time
    - Added an option that allows the controls to be placed above or below the main content area
    - Added the option for custom easing animations

    The link to download it is here:

    http://archive.kflorence.com/projects/easySlider/jquery.easySlider-kf.js
  91. Markus on 30 Aug, 2009 wrote:

    Hello,

    at first i have to say, the slider is a big ones ;-)

    i have a question. is it posibly to write a word (example hello, test, anyone, ..) and not the number (01, 02, 03,).

    thanks for your help and sorry for my bad englisch!

    greets from austria
    markus
  92. Rado R. on 31 Aug, 2009 wrote:

    This is the coolest and easiest plugins I've ever seen man!
    This plugin rocks!!!

    Keep it that way!

    Greetz! Rado R.
  93. Des on 1 Sep, 2009 wrote:

    Great plugin - loving it so far.

    It would be great to add some kind of callback functionality . . .
    onChange, do something, etc.

    I'll be using it on many projects!!!
  94. Willem on 1 Sep, 2009 wrote:

    Hi,

    I was wondering how to position the numeric area right instead of left. Can someone help me with this?

    Thanks!

    Willem
  95. Ramiro on 2 Sep, 2009 wrote:

    Nice Plug! How can we customize the numeric navigation to show text instead of numbers. Thanks in advanced.
  96. Jamie on 2 Sep, 2009 wrote:

    Hi,

    Wow this really is such a great script. So easy to use and looks great.

    Would just like to know if someone can help me. The script looks great on all the browsers except for ie 7 and lower. For some reason on ie 7 and ie 6 the images dont display as a slider but rather all of them show one on top of the other. Is there any reason for this?

    Thanx

    Jamie
  97. cester on 2 Sep, 2009 wrote:

    It is possible to insert a textlink as numeric navigation?

    For Example:

    Step 1: Intro Steb 2: Product .....

    Thanks!
  98. Jakob on 3 Sep, 2009 wrote:

    I followed your all your steps.
    The only thing is the buttons dont work.
    what is wrong?
  99. Oren on 3 Sep, 2009 wrote:

    a great tool, I am using it with RTL support.
    thereare some modification do to: when I use the following head tag the tool is not working <html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" lang="he">
    to make it work, i changed the the slider div:
    <div id="slider" dir="ltr"> and it is working very good,
    thanks for sharing.

Sorry, further comments are disabled for this post.

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

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

Subscribe to CSSG Feed

Want to join?

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

Apply here

Become a friend