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