responsive banner with responsive next/back arrows over the top

Question

I want to create a simple 4 slide banner which is 100% width & responsive with 4 responsive buttons underneath to switch between slides, but also as an addition arrows on either side of the banner to jump back and forth between the previous and next slide.

I've built the banner and the functionality works but I can't get the arrows to adjust vertically so they always stay in the vertical middle of the banner. It's probably to do with them being absolute but I don't know any other way of getting them to float over the top of the banner.

Help much appreciated

My code:

<script type="text/javascript">
            var currLayerId = "text0click";
            function togLayer(id)
            {
            if(currLayerId) setDisplay(currLayerId, "none");
            if(id)setDisplay(id, "block");
            currLayerId = id;
            }

            function setDisplay(id,value)
            {
            var elm = document.getElementById(id);
            elm.style.display = value;
            }
</script>

<style>
section#homebanner {width: 100%; float: left;}
section#homebanner section.slider_buttons {width: 100%; float:left;}
section#homebanner section.slider_buttons a {width: 23%; float: left; padding: 1%; text-align: center;}
section#homebanner section.slider_buttons a.bana {background: yellow;}
section#homebanner section.slider_buttons a.banb {background: red;}
section#homebanner section.slider_buttons a.banc {background: green;}
section#homebanner section.slider_buttons a.band {background: blue;}

section#homebanner section.slider {width:100%; height:auto;}
section#homebanner section.slider #text0click {display: block; background: yellow;}
section#homebanner section.slider #text1click {display: none; background: red;}
section#homebanner section.slider #text2click {display: none; background: green;}
section#homebanner section.slider #text3click {display: none; background: blue;}

section#homebanner section.slider .leftarrow {position: absolute; top: 48%; left: 2%; font-size: 30px}
section#homebanner section.slider .rightarrow {position: absolute; top: 48%; right: 2%; font-size: 30px}
section#homebanner section.slider img {width:100%; height:auto;}
</style>


<section id="homebanner">

        <section class="slider">
                <div id="text0click"> 
                        <a href="#" class="leftarrow" onclick="togLayer('text3click');return false;"> < </a>   
                        <img class="slide1" src="http://mwaistell.co.uk/test/slide1.jpg" />
                        <a href="#" class="rightarrow" onclick="togLayer('text1click');return false;"> > </a> 
                </div>
                <div id="text1click">  
                        <a href="#" class="leftarrow" onclick="togLayer('text0click');return false;"> < </a>      
                        <img class="slide2" src="http://mwaistell.co.uk/test/slide2.jpg" />
                        <a href="#" class="rightarrow" onclick="togLayer('text2click');return false;"> > </a> 
                </div>
                <div id="text2click">
                        <a href="#" class="leftarrow" onclick="togLayer('text1click');return false;"> < </a>        
                        <img class="slide3" src="http://mwaistell.co.uk/test/slide3.jpg" />
                        <a href="#" class="rightarrow" onclick="togLayer('text3click');return false;"> > </a> 
                </div> 
                <div id="text3click">
                        <a href="#" class="leftarrow" onclick="togLayer('text2click');return false;"> < </a>     
                        <img class="slide4" src="http://mwaistell.co.uk/test/slide4.jpg" />
                        <a href="#" class="rightarrow" onclick="togLayer('text0click');return false;"> > </a> 
                </div>    
        </section>


        <section class="slider_buttons">
        <a href="#" class="bana" onclick="togLayer('text0click');return false;">1</a>
        <a href="#" class="banb" onclick="togLayer('text1click');return false;">2</a>
        <a href="#" class="banc" onclick="togLayer('text2click');return false;">3</a>
        <a href="#" class="band" onclick="togLayer('text3click');return false;">4</a>
        </section>

</section>

and a jsfiddle: http://jsfiddle.net/vko2hddn/

Answer 1

Actually I've figured it out I was just approaching it incorrectly, I needed to add the arrows to a seperate div on each slide which would be set to absolute and then the arrows would be marginly positioned inside that:

section#homebanner section.slider .arrows {width:100%; position: absolute;}
section#homebanner section.slider .leftarrow {float: left; width: 47px; height: 45px; margin-top: 12%; margin-left: 2%; padding-top: 5px; padding-right: 3px; font-size: 30px; text-align: center; text-decoration: none; color: white; border: 4px solid; border-radius: 100%;}
section#homebanner section.slider .rightarrow {float: right; width: 47px; height: 45px; margin-top: 12%; margin-right: 3%; padding-top: 5px; padding-left: 3px; font-size: 30px; text-align: center; text-decoration: none; color: white; border: 4px solid; border-radius: 100%;}


<div id="text0click"> 
      <div class="arrows">
            <a href="#" class="leftarrow" onclick="togLayer('text3click');return false;"> < </a>   
            <a href="#" class="rightarrow" onclick="togLayer('text1click');return false;"> > </a>
      </div> 
      <img class="slide1x1" src="http://mwaistell.co.uk/test/slide1.jpg" />
</div>

So it now looks like this: JS http://jsfiddle.net/pcwrvjq0/