[Plugin: AnythingSlider for WordPress] Move navigation tabs to top of panel

I’ve read the code snippets on doing this using the “appendControlsTo” option, but I’m not sure how to make this work with the WordPress shortcode.

Good questions. I haven’t yet incorporated that option into the plugin. I’ll add it to the feature request list thread now so I don’t forget. You should be able to position the controls with CSS so they appear above the slideshow.

Good luck! Share a link if you get stuck.

So with some not-very-elegant CSS manipulations, I’ve managed to get the look I was going for, almost.

I want to use z-index to stack the tabs on top of one another in the order I want. I also want to specify different styles for my last tab (to close the menu bar). How do I define the properties, position and z-index for a specific tab? Thanks!

Link to my site:
https://jobs.otak2.com/

.thumbNav li a
.thumbNav li a.panel2

If you use the web inspector to check out the classnames, you should be able to find enough hooks to achieve what you’re after.

-J

Jacob,

Thanks so much! I’m still pretty new to this, so really appreciate your help!

I’ve managed to target the individual navigation tabs, but they’re not stacking up with the z-index property. Can you see what I’m missing?

div.anythingSlider .thumbNav li a {
	font: 21px/28px Georgia, Serif;
	color: white;
	background: transparent;
	display: inline-block;
	text-decoration: none;
	padding: 2px 8px;
	height: 28px;
	background-image: url(https://jobs.otak2.com/wp-content/uploads/2012/03/nav_light_bg.png);
	text-align: center;
	outline: 0;
	border-radius: 0px 0px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius 5px 5px 0 0;
}

div.anythingSlider .thumbNav li a.panel1 {
	z-index: 10;
	color: green;
	width: 146px;
	margin: 0 -22px 0 0;
}

div.anythingSlider .thumbNav li a.panel2 {
	color: blue;
	left: 150px;
	width: 146px;
	z-index: 7;
	margin: 0 22px 0 0;
}

No problem.

Couple things, you should reverse the order of your border-radius declarations. Put the un-prefixed last.

Add position: relative; to the anchor tags. z-index requires a positioning context other than static.

-J

I just used appendControlsTo by (1) changing

d.anythingSlider.defaults={
to
d.anythingSlider.defaults={appendControlsTo:”#nav”,
in the jquery.anythingslider.min.js

(2) adding to the page/post where I wanted it to appear
<div id=”nav”></div>

but then… the links don’t fire the slider to change. I think I’m missing a step here?

[The ‘#nav’ div is dynamic and the ‘li a’ tags do change, for instance, by moving the ‘cur’ class around.]