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
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.
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.
@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.
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!
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
Test case here using Plus Slider. This is an example showing how both images show up during the transition phase.
Update: Here is an animation of exactly how I'd like it to transition. http://i47.tinypic.com/6gygko.gif
try this: http://jquery.malsup.com/cycle/
it's my fav
@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
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/
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/
@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.
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!
Boom! http://jsfiddle.net/h7Y3F
Thanks again @kgscott284
:D Anytime!
@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
Hmm ok cool, i would have assumed:
Seems to be a little of both. Can't seem to get it displaying correctly.