Fork me on GitHub
Sudo Slider

GO HERE INSTEAD

Comments

Comments (418)

  1. Caitlin:
    Sep 26, 2012 at 03:38 PM

    Erik,


    I have an inner navigation on slide 2 of my slider. When you click any of the links it reloads the page and sets you back to the startslide (which is 1 in my case). I understand that history:true should fix this problem but I find the history feature finicky....is there any additional code I can add to tell the script to stay on slide 2 onclick?

    I started here - .link2 is the class I assigned to the inner nav links;
    $('.link2').ready(function(){
    sudoSlider.goToSlide(2);
    });

    This is clearly not the solution but if you could point me in the right direction that would be very much appreciated.

    Best,

    Caitlin

  2. Kevin:
    Sep 26, 2012 at 03:39 AM

    I have a slider that contains a form on each slide. I would like to remove the slide once each form is submitted. I am having trouble referencing the slider in the ajax callback because it is not defined. Thoughts? (I looked through the comments first to see if I could find an answer)

  3. Erik Krogh Kristensen:
    Sep 21, 2012 at 07:56 PM

    @Jack Lenox:
    Looking at the error console, the bug is not hard to find.
    Its the ScrollTo plugin bugging up, and most likely taking parts of jQuery down with it.
    I just tested, updating the ScroolTo plugin should solve the problem.

    @Tansh:
    It might be due to the TypeError that a part of the script in the template throws. SudoSlider should work fine on the any template if you read the documentation (and sometimes a little knowledge on CSS is required).
    And unless you give me a link with you "failed" implementation, this is all the help you're going to get.

    @Olan Suddeth:
    I'm quite sure it can be done, and i've done some of it here:
    http://webbies.dk/assets/files/SudoSlider/package/demos/nested%20sliders%20-%20Copy.html

    The whole "original home page content should be hidden" part is missing, but most of the stuff is working.
    I think that doing more than than the above demo requires knowledge about your particular layout. So this is all you're gonna get.

  4. Olan Suddeth:
    Sep 21, 2012 at 06:26 PM

    I see a demo of a slider within a slider, but the demo really just seems to be showing two directions of sliding. I'm hoping to accolish the following, and wonder if this script can do it:

    I have a home page that links to four other pages via a footer nav bar (I plan to present all pages as slides witin the one page). When clicking on a link on the home page, the original home page conten should be hidden, a new menu should display (slide into place at the top of the screen), and that menu should then operate sliding content beneath it from each of the four child pages (with the appropriate child page loading fromthe home page link). If the home link on this new menu is clicked at any time, we hide the child div (and new men) and show the original home page again.

    I know that it sounds complicated, but it's only five silly slides of HTML.


    Does that make sense? Can your script do this?

  5. Tansh:
    Sep 17, 2012 at 07:20 AM

    Why my sudo slider 2.2 cannot use in template "MetroBTK"?
    template address: http://btemplates.com/2012/blogger-template-metrobtk/

  6. Jack Lenox:
    Sep 14, 2012 at 03:13 PM

    Hi there,

    Fantastic plugin Erik. I love SudoSlider and I will be buying you a cup of coffee.

    However, I am having one issue on a client site that I'm building at the moment. The autoheight feature seems to work fine on the url shown below:
    http://benchmark.com.s125470.gridserver.com/what-we-do/

    But I have also added a dropdown with direct access to each of the slides and if you navigate directly to any of them, autoheight doesn't work, like this:
    http://benchmark.com.s125470.gridserver.com/what-we-do/#training

    I'm banging my head against a wall trying to work out what's happening! Any help would be much appreciated.

    Cheers,

    Jack

  7. Erik Krogh Kristensen:
    Aug 25, 2012 at 01:39 AM

    @Patryk:
    Dynamic width/height based on multiple slides is not something SudoSlider supports, so you have to do it manually.

    Like i did here:
    http://webbies.dk/assets/files/SudoSlider/package/demos/dynamic%20width%20tmp.html

    See the source code for details.
    Note: I only changed the JavaScript.

  8. Patryk:
    Aug 25, 2012 at 01:39 AM

    Hello, i have a problem that haven't be mentioned before in these pages.

    I have a 698px slider and i want to show multiple slides with images that have all the same height but not the same width (generaly 571px, 254px and 677px). I would to see the principal slide + a begining of the next, sticked to the principal (with a white border of 5-10px between).
    I've tried like in your "Sudo Slider jQuery Plugin - Multiple "slides" pr. slide + continuous demo", but it don't works. I see always just 1 slide, with blank space (due to the difference of image and slider width) at its right.
    I've tried with and without "width" in all css lines (here in the code, i left 250px just like that... :/ )

    I paste you my code. Can you help me?

    CSS:
    [CSS Removed, not needed]

    Script:

    $(document).ready(function(){
    var sudoSlider = $("#slider").sudoSlider({
    autowidth:true,
    autohight:false,
    slideCount:2,
    moveCount:1
    });
    });

  9. Erik Krogh Kristensen:
    Aug 16, 2012 at 01:52 PM

    I just released 2.2.0.
    For a full changelog see: http://webbies.dk/assets/files/SudoSlider/package/Changelog.TXT

    SudoSlider can now be responsive, so @gmclelland: yes, you can. Se this demo: http://webbies.dk/assets/files/SudoSlider/package/demos/responsive.html

    I also updated this comment page, so there are multiple pages of comments (much faster loading time).

    1. Erik Krogh Kristensen:
      Aug 16, 2012 at 01:54 PM

      I still don't see it.

      Could you send me an email or something with a screenshot where you pinpoint the issue.

  10. Kristin Falkner:
    Aug 02, 2012 at 01:13 PM

    Firefox 13 & 14 (not sure about 12) are seeing the 1px issue on even-sized browser viewports. I wasn't seeing it on 11 either but on the computer with an up-to-date Firefox version, it's there.

  11. Erik Krogh Kristensen:
    Aug 01, 2012 at 12:27 PM

    @Alinea*G:
    I'm currently working on that.

    @Jeff:
    No.
    In the demos there's a little ad in the bottom of the page (below the explanations), but there shouldn't be any within the slider itself.
    So i have no idea where that ad came from.

    @Kristin:
    What version of Firefox and which OS did you use.
    Because i wasn't able to reproduce the error in Firefox 11 and 14.0.1 on a Windows 7 64bit.

  12. Kristin:
    Jul 31, 2012 at 10:56 PM

    I wanted to amend my last comment/issue. The Firefox issue only seems to happen if your browser viewport is at an even width. If it's an odd, the transitions are fine. But if your browser is evenly sized at like 1280 vs. 1279, the 1px issue occurs. It occurs on all the demos at an even sizing, as well.

  13. Kristin:
    Jul 31, 2012 at 10:05 PM

    SudoSlider is awesome -- thanks for the great script. The newest version 2.1.8 does seem to have a 1px positioning issue with Firefox. It seems to either err 1px to the left or right. Sometimes it seems to be every other animation, other times it's just 3-4 slides in a row. Ex: http://www.traceybuyce.com -- no other browser experiences the jump that I've seen. Just wanted to make you aware of the issue!

  14. Jeff:
    Jul 30, 2012 at 05:02 PM

    Hey,

    Quick question: Is it possible that your sudoSlider code is displaying 3rd party Advertisements? One site we're using it on is showing a 3rd party Ad that pops up in the slider container. The Ad looks similar to the ones you see on YouTube.

    Thanks.

  15. Alinea*G:
    Jul 27, 2012 at 12:23 PM

    Hi there ! Thanks for such a useful tool ! I'm trying to get sudoslider doing a full background slider.
    I'm not javascript pro and I can't figure out how to make the slider always fit the screen, without scrollbar, and cutting the image more than stretching it in a weird way... Do you think it's possible ?
    Thanks, Alinea*G

  16. Erik Krogh Kristensen:
    Jul 14, 2012 at 10:54 AM

    @Raymond Sugel Sr:
    You can fix it by chaging my CSS to only target the children and not all decendants (see this: http://webdesign.about.com/cs/css/qt/tipcsschild.htm), you'll lose support for IE6 though.

    Or you can give all LI and UL in the slider a class, and then make sure that my CSS for LI and UL only target those.

  17. Raymond Sugel Sr:
    Jul 13, 2012 at 09:13 PM

    Hello,
    I'm using this slider in an eLearning project and am having an issue with bullets not displaying in a UL that is within a DIV that is within the slider LI. Here's an example:

    <DIV id="slider">
    <UL>
    <!--Slide 1_0-->
    <LI>
    <H1> blah blah blah </H1>
    <DIV class="left">
    <P> blah blah blah </P>
    <UL>
    <LI> blah blah blah </LI>
    <LI> blah blah blah </LI>
    <LI> blah blah blah </LI>
    <LI> blah blah blah </LI>
    <LI> blah blah blah </LI>
    <LI> blah blah blah </LI>
    </UL>
    <P> blah blah blah &t;/P>
    <UL>
    <LI> blah blah blah </LI>
    </UL>
    <P> blah blah blah &t;/P>
    <UL>
    <LI> blah blah blah </LI>
    <LI> blah blah blah </LI>
    </UL>
    <P> blah blah blah &t;/P> <br />
    <P> blah blah blah &t;/P>
    </DIV>
    <DIV class="right">
    <img src="images/1_0.png" />
    </DIV>
    </LI>
    </UL>
    </DIV>

    I've commented out anywhere list-style or list-style-type has been set to none in the sudoSlider css and js files without success. I've also tried any selector I know of to set list-style or list-style-type to disc.

    Any insight you can provide is greatly appreciated.

    Thanks in Advance,
    Ray

  18. Erik Krogh Kristensen:
    Jul 07, 2012 at 10:03 PM

    @Melina:
    You're welcome

    @gmclelland:
    The basic answer is no, SudoSlider can't adjust to a changing width.

    But it might be possible, by calling .destroy() and .init() after a resize, to make the slider re-fit inside its new size.

    It's something i might work on later.

  19. Melina:
    Jul 07, 2012 at 05:57 PM

    I tried what you told me and it works perfectly! Thank you so much :)

  20. gmclelland:
    Jul 06, 2012 at 08:01 PM

    Would this work in a responsive web design like flexslider does? http://www.woothemes.com/flexslider/

    Thank you

  21. Erik Krogh Kristensen:
    Jul 05, 2012 at 08:03 PM

    @Melina:
    During the fade animation, i set the z-index of the new image to 10000, to make sure that it is very much in front of the slider.
    So you can fix your problem by making sure fancyBox is even further up, by settings its z-index to 10001. Like this in your CSS:
    #fancybox-wrap {z-index: 10001;}

  22. Melina:
    Jul 04, 2012 at 01:18 PM

    Hi Erik, thank you for this wonderful plugin!
    I'm trying to use Sudo Slider in a project for which I need to integrate the slider with Fancybox. Basically when you click on an image in the slider, it is shown in real size in fancybox. I'm having an issue with this, since there is an overlap between the slider and the fancybox window, having the images of the slider on top of it when the fading occurs.
    Here is the link to the example page: http://www.melinaolivella.com.ar/arginbureau/servicios.html
    Is there a way I can fix this? Any help would be highly appreciated.

  23. Erik Krogh Kristensen:
    Jun 28, 2012 at 09:57 AM

    @Moe:
    I was not able to recreate (1), so i'm not sure what you are doing.
    So basicly, i need more info, i need the exact code you are using, or a link to a page where the problem is.

  24. Moe:
    Jun 27, 2012 at 04:53 PM

    My question is almost too dumb to ask, but I'm new to the js world so maybe not. When adding your slider, (1) the first image isn't there at the start, it fades in and (2) once it's done, it completely disappears before the next one shows, meaning, they don't fade between each other.

    I'm sure it's a setting but I don't know which one it is.

  25. Erik Krogh Kristensen:
    Jun 27, 2012 at 03:03 PM

    @Stan:
    You could use the callback functions, so that when slider2 slides, the callbacks resize slider1.
    Remeber to turn of autoheight and autowidth on slider1 if you do that.

    @Sander:
    For that to work, you need to use some CSS, to make sure that the "top" slider is twice the width/height of the nested sliders.
    slideCount is actually only a variable to tell the script how many slides you are showing, you have to make sure they are shown using your own CSS.

    @Pixi:
    Yes, change the CSS.
    CSS is not my strong side, so the heights and widths are hard-coded in that demo, just add some pixels to the height to make it work.

    @Dick Kirkland:
    You're welcome

    @Stefan:
    You can't do this simply by setting some settings, but you can do it manually.
    If you set up some JavaScript, where each animation triggers a setTimeOut that then triggers the next animation you can emulate the automatic sliding, and by making each animation go to "prev", you can make it go the other way.

    @Kenn:
    See my answer to Stefan

    @Kam Banwait:
    I'm actually surprised to hear that continuous works with nested sliders in any browser, didn't expect that.

    I think the problem could happen if you start the inner slider before you start the outer slider.
    Since continuous crates clones of the slides, this could cause problems if you try to clone an already started slider.
    So if you currently start the nested slider first, start it as the last.

    If you wan't any more help, i'll need a page demonstrating the problem.

    @Steve C:
    Yes.
    If you have stored the slider in sudoSlider, this works:

    afterAniFunc: function(t){
    if (sudoSlider.getValue('totalSlides') == t)
    {
    $(".submit_quiz").css("display","block");
    }
    }

    @Tozé:
    See the nested sliders demo, if you create a nested slider that is smaller, and have its own numeric controls, then it would basicly be as in your image.

    @Marc Korthout:
    No that is not normal.
    The SudoSlider works on all apple devices i have acces to, but that does not include an iPhone.
    What iPhone do you have?
    Would you be able to help me debug the problem?

    @grzes:
    You are correct, the current behaviour is not good, i have changed it in 2.1.8

    @Sunkist:
    I don't know.
    Maybe you can pause the video using JavaScript inside a callback, but i have no idea of how to pause/stop an YouTube video using JavaScript

    @Julien:
    If you when you initiate the slider set preloadAjax:false
    Then the slider should only load the current slide and its sibling

    @Sandro:
    As i write in the docs, the callback functions can run many times on clones of the same slide.
    So it does run on the same slide, just different clones of it. (Some older versions of SudoSlider had some problems, where they didn't run on the correct clones).
    But that is not a good way to do it, so i have changed it in the newest release (2.1.8)

    @baca:
    You could wait 800ms (if that is your animation time) before starting the auto-animation in the main slider.

    @jitender:
    Use this, it will stop it when it reaches the last slide.
    The below code works if the slider is saved the variable sudoSlider.

    afterAniFunc: function(t){
    if (sudoSlider.getValue('totalSlides') == t)
    {
    sudoSlider.stopAuto();
    }
    }

  26. jitender:
    Jun 21, 2012 at 11:24 AM

    Hey there

    sudoslider is very nice slider, it has many options over there but i have little issue with that my problem is that i have 5 image in slider and 3 display at once and i set it auto mode. it is scrolling one bye one now i just want to when my last image visible slider should stop automatically.

  27. Sandro:
    Jun 15, 2012 at 05:08 PM

    Hi, first thanks for the great work.

    I have a problem using the callback beforeAniFunc or afterAniFunc. The callback is called a lot of times and with different values for the var this. Is possible to receive the callback only one time and with the value of the var "this" corresponding to the actual slide?

    TY

  28. Julien:
    Jun 08, 2012 at 02:25 PM

    Hi, I really like your plugin and I use it very often.

    I need it for my curent project and I have a question about the Ajax feature.

    First, I load my sudoslider with no content, because I want to use Ajax.
    Then, I set the ajax array via the "setOption" method.
    This works fine, but the plugin load every url of the ajax array not only the curent slide and siblings...

    I'm work on localhost, and i have read a comment about the "ajaxLoad" method.
    The comment says the ajax feature can bug in localhost but works well on a server.

    So my question is, if I set the ajax array with the "setOption" method, sudoslider will be able to load only the first slide and siblings at start or it will load all the url in the ajax array automatically?

    Thanks a lot !

  29. Sunkist:
    Jun 06, 2012 at 10:14 PM

    Hello, thank you for this great slider. Iam using it for embedded youtube-videos and there ist a problem. If I click the Play-Button on the embedded youtube-player the video ist playing and don't stops if Iam sliding to the next video. The music plays in the background. How can I fix this? Thanks and regards, Sunkist

  30. grzes:
    May 03, 2012 at 04:32 PM

    i don't like how 'moveCount' option behaves. when i set it to 5 for instance, and there are 2 slides on the next page slider should move only 2 slides, currently it moves by 5 leaving empty gap on the right. i think it should work more like here: http://sorgalla.com/projects/jcarousel/examples/static_simple.html. i tried to modify this behavior inside callbacks with no luck :(

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15

This thread has been closed from taking new comments.

Help and support

If you need help, the first thing you should do is read the documentation.
Start with reading howto setup the slider if you are completely lost.

Donate to the project

I like my work, like to see a piece of code grow.
But humans doensn't live of air alone.
So if you like my creation, you should consider giving me a cup of coffee.

See the demos

The demos showcase just how much Sudo Slider can do.
They showcase features such as AJAX, fading, methods, captions automatic slidehow and a tabs.