Storefront Elegance Theme, add navigation to the slider

I was asked if it was possible to add some some Navigation to the Slider

It is possible to add Arrows fro Previous ans Next and Bullets for navigating to slides directly. It would be possible to add thumbnail navigation I believe but that becomes quite complicated as you need to change a bunch of page CSS to make room and also I find the Nivo thumbnail navigation a bit clunky when it comes to positioning. If you really need thumbnails it would probably be easier to strip out the Slider and add a different one.

First activate the Navigation

Luckily The Nivo Slider includes the code to make navigation possible. So first you need to make a couple of small changes to the slider settings in the homepage php file. Open tpl-homepage.php. If you have not done this before jump in these are very simple changes. In fact so simple I suggest you just do them by going to Appearance/Editor in WordPress and opening the file from the list. Of course if you have a proper code editor with line numbers etc go ahead and use it.
Around line 42 you will find the slider settings.

<script type="text/javascript">
jQuery(window).load(function() {
	jQuery('#slider').nivoSlider({
		effect:'<?php echo $slidereffect; ?>', //Specify sets like: 'fold,fade,sliceDown,sliceUpDown'
		slices:<?php echo $sliderslices; ?>,
		boxCols: <?php echo $sliderboxcols; ?>,
                boxRows: <?php echo $sliderboxrows; ?>,
		animSpeed:<?php echo $sliderspeed; ?>,
		pauseTime:<?php echo $sliderinterval; ?>000,
		startSlide:0, //Set starting Slide (0 index)
		directionNav:false, //Next & Prev
		directionNavHide:false, //Only show on hover
		controlNav:false, //1,2,3...
		controlNavThumbs:false, //Use thumbnails for Control Nav
      	        controlNavThumbsFromRel:false, //Use image rel for thumbs
		controlNavThumbsSearch: '.jpg', //Replace this with...
		controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
		keyboardNav:<?php echo $sliderkeyboard; ?>, //Use left & right arrows
		pauseOnHover:<?php echo $sliderhover; ?>, //Stop animation while hovering
		manualAdvance:false, //Force manual transitions
		captionOpacity:0.8, //Universal caption opacity
		beforeChange: function(){},
		afterChange: function(){},
		slideshowEnd: function(){} //Triggers after all slides have been shown
	});
});
</script>

The highlighted lines are the ones of interest

1. To turn the Previous Next navigation on set directionNav:true
2. To set the Previous Next navigation to only appear on hover set directionNavHide:true. This one is optional, I also suggest you not set this one until you are finished setting up all of the navigation. It will make tweaking you navigations positioning easier if it is permanently visible.
3. To turn on the numbered navigation which we will convert to bullets set controlNav:true

Ok go and reload the site and take a look. Pretty unexciting isn’t it! You should have The Words Next and Prev. stacked over each other on the left edge of the slider. There will also be tiny numbers spaced down the page. So time to jazz this thing up!

You need some graphics

I am posting some graphics here for users to download. You can use them as is, modify them, search the web for others, or create your own. These will give you an idea anyway. If you do use different graphics you may have to tweak some of the values, height, width and position mainly, in the CSS. I will comment it thoroughly to help.
I suggest you upload your images to the “images” folder in the elegance theme folder.

Lets make it Pretty

Ok now we need to get all of those juicy graphics in and that horrible plain text out.
This is what we want.

I will put the whole block of CSS here for you lazy folks to copy and paste. This goes in your custom.css file. See the note panel at the very end of this post. See below the code for an explanation of each section.

/*---------SLIDER-----------*/
#slider-frame, #slider {
     position: relative;
}
/* BULLETS */
/*move middle text down*/
#beneath-slider {
     margin-top: 40px;
}
/*bullet container*/
#slider .nivo-controlNav {
     background: none repeat scroll 0% 0% transparent;
     left: 50%;/*unfortunately manual horizontal adjustment*/
     position: absolute;
     bottom: 105%;/*position below the slider*/
     margin-left: -40px;
}
/*slider bullets */
#slider .nivo-controlNav a {
     background: url("images/slider-bullets.png") no-repeat scroll 0pt 0pt transparent;/*change to your image path*/
     border: 0pt none;
     float:left;/*so they sit beside each other*/
     display:inherit;/*over-ride block setting on slider also so they sit besid eeach other*/
     height: 15px ! important;/*small enough to show 1 just part of bullet graphic */
     width: 15px; /*adjust to fit your graphic*/
     margin-right: 17px;/*space between bullets*/
     text-indent: -9999px;/* move the text way way off screen*/
}
/* current slide bullet */
#slider .nivo-controlNav a.active {
     background-position: 0pt -18px;/*move the background up so dot shows and indicates curret slide*/
}

/* ARROWS */
/*slider arrows graphics*/
.nivo-directionNav a {
     background: url("images/slider-arrows.png") no-repeat scroll 0% 0% transparent;
     border: 0pt none;
     display: block;
     height: 45px;/*area of graphic visible adjust for your arrows*/
     width: 45px ! important;/*area of graphic visible, adjust for your arrows*/
     text-indent: -9999px;/* move the text way way off screen*/
}
/*left arrow*/
a.nivo-prevNav {
     left: -40px;/*set horizontal arrow location*/
}
/*slight move on hover*/
a.nivo-prevNav:hover {
     left: -42px;/*2 pixel move*/
}
/*right arrow*/
a.nivo-nextNav {
     background-position: -45px 0pt;/*move background to reveal right arrow*/
     right: -40px;/*set horizontal arrow location*/
}
/*slight move on hover*/
a.nivo-nextNav:hover {
     right: -38px;/*2 pixel move*/
}

Lines 1-9
First I set the Slider container to position relative so we can position the other items in relation to it. Then I push the Homepage Middle Text area down a little to make room for the bullets.

The bullets

Lines 10-17
Position the container which holds all of the bullets, clear any background and set positioning to absolute, position values will be in relation to slider.

The highlighted lines.

They position the container that holds the bullets. Unfortunately the bullets container must be centered manually. You will need to adjust this each time you add or remove slides. A little math required or just eyeball it.
In my case a 3 bullet container firebug told me my container was 96px wide. Thats 3 x 15px the width we set for bullet above, plus 3 x 17px for the 3 right margins = 96px. But remember that the last right margin is blank space so remove that. 96 – 17 = 79px. The bullet control container is set to position left 50%, so its left edge will be aligned with the center of our slider. Half the bullet container is 39.5 pixels, as we do not deal in half pixels, say 40. Just add a negative margin of 40px on the left side to pull it over into the center.
Of course if you don’t want to have to align it when you make changes, you could just align it a sort distance say 10 pixels from the left edge of the slider. left:10px; and leave out the negative margin.

Lines 18-28
This is the individual bullet containers. Add the background image to the container not repeating. Remember to set to your image path. Remove any border. Float the bullets left so they sit next to each other. Set display: to inherit to over-ride default block setting which stops them sitting beside each other.
Set the height and width of the container so that it only reveals the top half of the 2 part bullet graphic, the not selected version. Add margin right to put some space between the bullets.
Finally move the default text way way off screen.

Lines 29-32
Make the magic happen, when the slide that relates to this bullet is active move the background graphic up in its container to reveal the lower part of the graphic, the active look.

The arrows

Lines 34-43
This stuff effects both arrows. Set the background image to your arrows image which contains both left and right arrows. Set it to appear only once with no-repeat.
Remove any borders. Set the height and width of the arrow container so it only reveals one arrow. Finally move that ugly default text way way off screen.

Lines 44-51
Position the left arrow 40 pixels to the left of the slider edge. This is completely up to you, it could be over the slider if you like.
Add a slight 2 pixel move when the user hovers over the arrow. This is optional.

Lines 52-60
The same for the right arrow but we also have to move the background graphic inside the container so we see the right arrow.

That’s it!

Remember to go back into tpl-homepage.php and set directionNavHide: to true if you want it to only appear when the user hovers over the slider. If you want to adjust the vertical location of the arrows, which is currently the default mid point, just add top:??px to the .nivo-directionNav, the rule which governs both arrows.
Enjoy it should all look pretty good.