Decent jQuery Slider?

[chrisburton]

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

[chrisburton]

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

[chrisburton]

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

[dfogge]

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

it’s my fav

[chrisburton]

@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

[chrisburton]

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/

[chrisburton]

@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.

[chrisburton]

Boom! http://jsfiddle.net/h7Y3F

Thanks again @kgscott284

[chrisburton]

@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

[chrisburton]

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

[Author]

Posts