Responsive design 响应性横幅，顶部带有响应性下一步/后退箭头

我想创建一个简单的4张幻灯片横幅，其宽度为100%，下面有4个响应按钮，用于在幻灯片之间切换，同时在横幅两侧添加箭头，用于在上一张幻灯片和下一张幻灯片之间来回跳跃

我已经建立了横幅和功能工程，但我不能让箭头垂直调整，使他们始终停留在横幅的垂直中间。这可能是因为它们是绝对的，但我不知道还有什么其他方法可以让它们漂浮在旗帜的顶部

非常感谢你的帮助

我的代码：

<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>

---

还有一个jsfiddle:

事实上我发现我只是走近了错误的方向，我需要将箭头添加到每张幻灯片上一个单独的div中，该div将设置为绝对值，然后箭头将大致位于该div中：

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>

现在看起来是这样的：JS