Hi All,
Having read in detail the numerous posts on this subject i am struggling to understand where the errors are on the tab styling of this example page:
The Carousel functions are working but I appear to be unable to apply any styling to the tabs so that they align with the relevant larger image.
The page is a working draft and for now the tab images are all the same but eventually they will match the larger images. The tabs in the test page are transparent PNG-24 images with a hole cut in the centre.
The effect I am trying to achieve is to highlight the tab by having the background colour change, page colour when deselected, white when selected.
I have set up the tag style .controls a img. with the background colour setting applied for the deselected state and tag style .controls a img.active for the selected state.
It appears that i have missed something or built in an error somewhere but unable to resolve. Your help and advice will be appreciated.
PS: I have also deleted out all earlier Carousel actions to ensure there were no clashes.
Thanks, Stuart
Have uploaded again and you should be able to see the tabs at the base of the page beneath the large images, left of centre. Although they are a little slow to load.
Hi Stuart,
There are a couple of things here that need to be fixed to get the effect you are after.
The style you added for the active class on the tabs is incorrect. It was .controls a img.active and should be .controls a.active img because it is the anchor (a) tag that is being given the active state by the carousel code and not the image within it.
You haven’t given any of your tabs (or a parent item) the class of ‘controls’. Without this the style above won’t be able to locate the item to change the style.
In the following example I added the class ‘controls’ to ‘item18’ and used the following CSS to give each active tab a background colour;
Lastly I changed the abbots012 thumbnail images from JPGs to transparent PNGs (as Dave previously mentioned) so that the background colour defined by the newly added active class can show through.
As an alternative to changing the CSS like this you can use the Carousel Tab Button Action that ships with the Wood Slider example file and do all of this simply by specifying different images for the tab states in the Action; http://www.freewaystyle.com/wood-slider
I hope this all helps.
Regards,
Tim.
On 16 Feb 2014, at 11:39, Stuart O wrote:
Have uploaded again and you should be able to see the tabs at the base of the page beneath the large images, left of centre. Although they are a little slow to load.