Video
Web
Bookmark and Share

Expanding DSlider (jQuery content slider)

In this tutorial I will show you how to add new functions to the DSlider (jQuery content slider), created in a previous video. First we will clean up the javascript file, then add a timer that will automaticly animate after a specified time, and finally we’ll make it controllable by the left and right arrow keys.

DownloadDemo

If you haven’t seen the first movie on DSlider I recommend viewing that first: http://dimics.com/text/jquery-content-slider.


For more info on the javascript timer functions used in this video visit: http://w3schools.com/js/js_timing.asp.

DownloadDemo

Greetz,

Durgé

Posted: September 28th, 2009 by Durgé
  1. banny says:

    very nice
    thnxxxx
    good tutorial once again

    October 6, 2009 at 07:59
  2. banny says:

    hey mate
    tell me plz
    what to do when i want the slider to slide in vertical method
    instead on horizontal side by side method
    how to make it vertical slide
    thanx a lot mateee

    October 13, 2009 at 15:46
  3. Durgé says:

    If you want it to slide vertical, take a look at the first vid. In the video first the slides ar vertical under each other. Use that and use the “top” to animate it.

    October 17, 2009 at 15:49
  4. banny says:

    thnx my mate
    ur tut are of gr8 help:)
    looking fwd to see more from u mate
    have a nice day

    October 18, 2009 at 08:19
  5. mikel says:

    Hi I wanted to create a slide menu just like yours on the left hand side. when you hover to the menu it slides out can you tell me some please. Thank you.

    July 12, 2010 at 01:31
  6. mohan says:

    hi
    good tut from your side
    thanks

    October 7, 2010 at 12:35
  7. Tai Tran says:

    good tut , but i have some question i hope u will answer it :

    1. i dont understand that var slides = $(‘#slides’).length
    in the note that u wrote if(current==slides) this is last slide.

    why? var slides = $(‘#slides’).length mean last?

    November 25, 2010 at 04:37
  8. Durgé says:

    val slides = $(‘#slides’).length counts all slides.
    In the example this will be 3.

    Since this is the total number of slides, the variable “slides” also is number of the last slide. If it’s the current, we need to animate to the first.

    November 25, 2010 at 18:24
  9. Tai Tran says:

    oh ty i got that
    I have 1 more question:)
    1. in jquery code if(current == slides) this mean if (3==3)
    i asked my friend he said current that counted 3 slides cuz depend on var slides = $(‘#slides’).length …
    1.I dont know why this var current and var slides relative? i’m thinking now that var current shouldn’t know there are 3 slides expect var slides.. huh can u explain for me ?:]~

    November 28, 2010 at 08:07
  10. Tai Tran says:

    except not expect :(

    November 28, 2010 at 08:10
  11. Durgé says:

    Because var current get’s updated every time the visible slide changes, look through the code, under the statements that animate the slide, there is some code to update the var current.

    If the if statement returns “true”, the slider animated one time back(previous button was pressed), or was animated two times forward.

    Just walk “debug style” step for step trough the code and you will see.

    November 28, 2010 at 11:52
  12. Tai Tran says:

    oh !!~.~ that helped me.
    thanks very much , but long time i don’t see any new tuts from ur site anymore? are u busying?

    November 28, 2010 at 21:57
  13. Gabriel says:

    Is it possible to change the slider transition to a fading transition so that the new slides just fade into on another?

    November 30, 2010 at 12:31
  14. mysense says:

    why is this code in your index page?

    [code]

    var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
    document.write(unescape(“%3Cscript src='” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));

    try{
    var pageTracker = _gat._getTracker(“UA-9537575-1”);
    pageTracker._trackPageview();
    } catch(err) {}

    [/code]

    November 30, 2010 at 16:59
  15. mysense says:

    Hmm i took your code, made it vertical but there seems to be a problem in chrome. Might not have anything to do with your code but could you take a look at it? I guess you can see my email? if not let me know i can pm it or something.

    PS: i think i noticed your dutch in the video, am too.

    November 30, 2010 at 18:18
  16. Durgé says:

    The “weird” javascript is from google analytics.
    To track stats, views and so on.

    I’ve seen your email, I can’t see an obvious problem.
    I’m pretty busy right now, when I find the time I will take a closer look.

    Yes we are Dutch xD..

    December 3, 2010 at 15:21
  17. Durgé says:

    @Gabriel

    Everything is possible.. I don’t think my code is the easiest way to.

    Maybe just align all slides ontop of each other, and then hide and make visible..

    It wil take some hours of tying and frustration ;p
    Or just download an other slider somewhere.

    Good luck! :)

    December 3, 2010 at 15:32
  18. Mohamed says:

    Could you plz make tutorial about to make Jquery ScrollTo Like what you made in DiMics,
    Thanks

    March 11, 2011 at 19:10
  19. Beny says:

    @Durgé : Hi, Congratulations for your so simple slider !

    Actually, I use DSlider with Shadowbox but I have a problem.
    When I open an image (with Shadowbox), the slider in background keeps sliding… So when I close the Shadowbox I am in an other slide page. (I could locate in the Shadowbox code where to place a function that would stop the slide).

    Would you have any idea how to stop the slider and then run it ?
    (I tried with “Timer()”, “ClearTimer” (…) but it dosen’t works).

    Thank you in advance !
    Best

    Beny

    April 6, 2011 at 15:21
  20. Hans says:

    Dear Durgé,

    At first…. Thank you very much for your Dslider. I was looking for that a long time.
    Do you have a solution if I want to make it liquid to fit in differnt screen sizes?
    I appreciate it a lot, as I tried a lot with % in css.

    All the Best from Berlin

    Hans

    November 3, 2011 at 14:07
  21. embroidme-cincyeast.com says:

    Thanks for finally writing about >Dimics | Expanding DSlider (jQuery content slider)
    <Liked it!

    October 29, 2012 at 17:29
  22. hadi says:

    thank u soooo much u helped me a lot keep the good work thank u again

    February 17, 2013 at 00:22
  23. click here says:

    This is very interesting, You’re a very skilled blogger. I’ve joined your feed and
    look forward to seeking more of your magnificent
    post. Also, I’ve shared your web site in my social networks!

    August 5, 2013 at 20:45



To top