Vertical Slider

[Shoxt3r]

Hi there,

I'm currently looking into using a JQuery plugin to create a vertical slider for background images. My idea is that I have JQuery controlling an automatic vertical slider which fills the screen but also gives the user the control to scroll through at leisure.

I've managed to track down a relatively small plugin to do the job but I am having problems modifying it so that the controls appear exactly where I want them to (i.e so that the scrolling ability can happen using the up and down arrows). However, when I adjust the positioning using CSS it simply breaks the JQuery code (mainly because the HTML is generated by the JQuery, or that's what I assume?).

Below is a link to the download page for the code and a further link to demonstrate what the horizontal version does. To change it to vertical it's a simple case of changing the "alignment:" from hori

http://www.htmldrive.net/items/show/...Content-Slider

http://www.htmldrive.net/items/demo/...Content-Slider

I am fairly sure this should be something simple to do but as my JQuery knowledge is very limited I can't quite figure out what I need to do.

Any help would be much appreciated!

Cheers,

Andrew.

[ralph.m]

Are you able to post a link to what you have already?

It looks like that example if of the bxSlider, which also has its own website with a lot of info, including a vertical scroller example:

http://bxslider.com/examples/vertical-slideshow

[Shoxt3r]

Are you able to post a link to what you have already?

It looks like that example if of the bxSlider, which also has its own website with a lot of info, including a vertical scroller example:

http://bxslider.com/examples/vertical-slideshow

Thanks for your quick reply!

So far I haven't managed to get it much beyond the code that's demonstrated. All I have done is positioned the "next" link to the left of the scroller which appears to break the code as the "next" or down option as it is on my example flickers and does not work when clicked.

http://www.psychobeing.co.uk/verticalslider/

I also envisage one further issue which may cause some problems. I want the content div to fill the screen but have the controls appearing on top. Would there be an easy way to modify the JQuery so that I simply link my own HTML to it rather than it generating it all for me? That way I can have much more control over where things are positioned etc.

Also you are correct it is the BXSlider. However, there is no demonstration HTML within the download files to give an example of how to lay it out, only the source files for the JQuery, CSS and some images.

Thanks again.

[ralph.m]

In your example, both arrows have a "prev" class. Shouldn't one of them be "next"?

In terms of full page, it might be better to find a slider that is already set up that way. Perhaps Google "full page jQuery slider". One that comes to mind is Supersized3.

[Shoxt3r]

In your example, both arrows have a "prev" class. Shouldn't one of them be "next"?

In terms of full page, it might be better to find a slider that is already set up that way. Perhaps Google "full page jQuery slider". One that comes to mind is Supersized3.

Yeah that was me trying to get my head around it working, just a temporary change to see what it did and to gain control of the object without interferring with the original css.

Thanks very much for your suggestion. I looked into Supersized before but again there wasn't a full-feature demo. However, after looking for "full page jquery sliders" on Google I came across a background image slider which does exactly what I want and best of all, has a demo which I've been able to tweak to get what I want! . Without your suggestion I don't think I would have even thought of it...spent quite a long time and it was there all the time

For anyone else interested you can find the nifty slider which has a range of options to choose from here: http://www.ajaxblender.com/bgstretch...n-updated.html

[ralph.m]

Glad you found one that suits. Thanks for the link. One more to add to the collection.

[Markdidj]

Just want to add something to this discussion. Be careful when using background image sliders. A friend created one for her DJ site, and I done a stupid thing visited on my mobile. 1/100 of my monthly allowance was zapped from 1 page visit! I'm not on a high tarrif, but her images were for large screens and all were preloaded

[Shoxt3r]

Just want to add something to this discussion. Be careful when using background image sliders. A friend created one for her DJ site, and I done a stupid thing visited on my mobile. 1/100 of my monthly allowance was zapped from 1 page visit! I'm not on a high tarrif, but her images were for large screens and all were preloaded

Ah thanks for the tip! It may mean me making a new site for mobiles then....or I have heard of some clever application which drastically optimises images without reducing their quality (online only I think it was and was something of an innovation). Going off-topic here but any ideas what it was called?