Forums

  • # 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 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:52 am

    Boom! http://jsfiddle.net/h7Y3F

    Thanks again @kgscott284

    # 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:24 am

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

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag