Grow your CSS skills. Land your dream job.

Decent jQuery Slider?

  • # September 7, 2012 at 12:04 pm

    Hey guys, I’m looking for a custom jQuery Slider with very simple functionality. Essentially I want a fader and numeric navigation. However, I need that navigation to be placed in my sidebar, not above or underneath the slider.

    One of the biggest issues I’m having with every slider I have come across is that during the transition phase it shows both images. I would prefer that after it shows the first image, it slowly fades away, then hides and fades in the new image. This issue is occurring because I have transparent images and cannot use a background.

    Would it be difficult to make this from scratch or does anyone have an idea of where I can find a slider that does this? It also needs to be responsive and handle dynamic heights.

    I have used the following:
    Nivo Slider,
    Flexslider,
    Responsiveslides.js,
    Plus Slider

    # September 7, 2012 at 1:03 pm

    Test case here using Plus Slider. This is an example showing how both images show up during the transition phase.

    # September 7, 2012 at 4:30 pm

    Update: Here is an animation of exactly how I’d like it to transition. http://i47.tinypic.com/6gygko.gif

    # September 7, 2012 at 4:46 pm

    try this: http://jquery.malsup.com/cycle/

    it’s my fav

    # September 7, 2012 at 4:49 pm

    @dfogge Do you know off hand if this works for images with a dynamic height?

    Update: Thanks @dfogge, just found this page deep inside the website. http://jquery.malsup.com/cycle/diffsize.html

    # September 7, 2012 at 5:32 pm

    I’ve got someone on StackOverflow.com to create something for me without a plugin. Now all I need is how to set the numeric pagination and transition only by a click event.

    http://jsfiddle.net/EgkFq/5/

    # September 7, 2012 at 11:47 pm

    Well I finished it hahaha…I didn’t intend to but it was too much fun! All you have to do is take it and style it as you see fit, i just through together some quick stuff so it wasn’t too bland…It should all be pretty self explanatory, if you have any questions on what I added/changed just ask.

    http://jsfiddle.net/vgxWp/

    # September 8, 2012 at 8:24 am

    @kgscott284 Thank you so much. Is there a way where I can add the pagination in my sidebar rather than above or below the images? If you look at the gif (http://i47.tinypic.com/6gygko.gif) it shows how I wanted to display it.

    # September 8, 2012 at 8:30 am

    Yea, simply restyle it with CSS, move it wherever you want, as long as it has a unique ID so jquery can find it you should have no trouble…it is appended to an empty div so you can move it wherever you’d like!

    # September 8, 2012 at 8:52 am

    Boom! http://jsfiddle.net/h7Y3F

    Thanks again @kgscott284

    # September 8, 2012 at 8:56 am

    :D Anytime!

    # September 8, 2012 at 9:31 am

    @kgscott284 One last thing (sorry), do you know why I’m getting these scrollbars? http://jsfiddle.net/SXGLT/1/embedded/result/

    Update: Seems like a max-width issue on .main

    # September 8, 2012 at 10:12 am

    Hmm ok cool, i would have assumed:


    #sticky-wrap {
    overflow: auto;
    padding-bottom: 39px;
    }
    # September 8, 2012 at 10:24 am

    Seems to be a little of both. Can’t seem to get it displaying correctly.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".