The nav buttons are added to the main BODY of the page and not inside the Carousel container. To hide them, you need to do it separately from the later. Given the below carousel instance, the function in red will allow you to hide/show its nav buttons when called:
Code:
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['arrowl.gif', -5, 80], rightnav: ['arrowr.gif', -20, 80]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})
function showhidenavbuttons(galleryid, action){
var config=stepcarousel.configholder[galleryid]
var $navbuttons=config.$leftnavbutton.add(config.$rightnavbutton)
$navbuttons[action=="show"? "show" : "hide"]()
}
</script>
With the function in place, the following links when clicked on will hide/show the carousel's nav buttons:
Code:
<a href="javascript:showhidenavbuttons('mygallery', 'hide')">Hide buttons</a> | <a href="javascript:showhidenavbuttons('mygallery', 'show')">Show buttons</a>
In other words, you'd call the function:
Code:
showhidenavbuttons('mygallery', 'hide')
With the 1st parameter being the ID of the carousel instance, and the second parameter, either "show" or "hide". In your case you want to call this function when the user switches tabs. How to do this exactly depends on the tab script in question.
Bookmarks