Как сделать мой текущий код отзывчивым и добавить стрелки шеврона

Question

Не уверен, возможно ли, что мое текущее кодирование для карусели изображений может быть сделано так, чтобы оно отвечало требованиям. Только я хочу, чтобы изображения были отзывчивыми, а не подписи. Кроме того, я надеюсь добавить стрелки (шеврон) к изображениям для предыдущей и прямой навигации. В течение прошлого года он включал и выключал сеть с теми же результатами.

<style type=text/css>

#tst {
position:relative;
left:0px;
top:0px;
width:580px;
height:305px;
border:solid black 0px;
}

#tst  .frame {
width:580px;
height:305px;
border:solid black 0px;
}

#tst  .paginate {
position:absolute;left:200px;top:304px;width:250px;
}

#tst .panel {
position:relative;
left:0px;
top:0px;
width:18px;
height:18px;
background-Color:#;
border:solid black 0px;
margin-Top:1px;
text-Align:center;
float:left;
margin-Left:15px;
background-Image:url(url);
background-size:18px 18px;
}

#tst .active {
left:0px;
background-Color:#;
text-Align:center;
background-Image:url(url);
background-size:18px 18px;
}

#tst .links {
position:absolute;
z-Index:4;
top:242px;
left:-15px;
background-Color:2D2D2D
}

#tst .links DIV{
width:580px;
height:60px;
background-Color:;
float:left;
margin-Left:20px;
text-Align:left;
}

</style>

<script type=text/javascript 
src="https://dl.dropboxusercontent.com/s/4zw9e7lcylqzpd9/carousel_jsanimate_1.js">
</script>


<div id=tst>

<div class="paginate" >
<div class=panel>
<p style="color: white; font-size: 8pt"> </p>
</div>
<div class=panel>
<p style="color: white; font-size: 8pt"> </p>
</div>
<div class=panel>
<p style="color: white; font-size: 8pt"> </p>
</div>
</div>


<div class=frame>
<p><a href="url"></a><a href="url"><img src="url" style="width: 100%;" />

<div class=links>
<div><p><a href="url"><strong><font size="3">CAPTION TITLE 1</font></span></strong></a></p>
<p><font size="2">Caption 1.</font></span></p>
</div>
</div>
</div>

<div class=frame>
<p><a href="url"></a><a href="url"><img src="url" style="width: 100%;" />

<div class=links>
<div><p><a href="url"><strong><font size="3">CAPTION TITLE 2</font></span></strong></a></p>
<p><font size="2">Caption 2.</font></span></p>
</div>
</div>
</div>

<div class=frame>
<p><a href="url"></a><a href="url"><img src="url" style="width: 100%;" />

<div class=links>
<div><p><a href="url"><strong><font size="3">CAPTION TITLE 3</font></span></strong></a></p>
<p><font size="2">Caption 3.</font></span></p>
</div>
</div>
</div>
</div>

<script type=text/javascript>

function SS(o){
var oop=this,obj=document.getElementById(o.ID),frames=this.bycls(o.FrameClassName,obj),cls=o.PanelClassName,panels=this.bycls(cls,obj),z0=0,active=typeof(o.ActiveClassName)=='string'?o.ActiveClassName:'',auto=o.AutoRotateHold;
this.ary=[];
for (var z0=0;z0<frames.length;z0++){
frames[z0].style.position='absolute';
frames[z0].style.top='0px';
frames[z0].style.zIndex=z0>0?'0':'1';
this.ary[z0]=[new zxcAnimate('opacity',frames[z0],z0>0?0:100)];
zxcOpacity(frames[z0],z0>0?0:100);
if (panels[z0]){
this.ary[z0][1]=[panels[z0],cls,cls+' '+active];
panels[z0].className=this.ary[z0][1][z0>0?1:2];
panels[z0].style.zIndex='2';
this.addevt(panels[z0],'mouseup','GoTo',z0);
}
}
this.cnt=0;
this.to=null;
this.ms=typeof(o.AnimationSpeed)=='number'?o.AnimationSpeed:1000;
if (typeof(auto)=='number'){
this.hold=auto+this.ms;
this.addevt(obj,'mouseover','Pause');
this.addevt(obj,'mouseout','Auto',true);
this.to=setTimeout(function(){ oop.Auto(); },this.hold);
}
}

SS.prototype={

GoTo:function(nu){
this.Pause();
var ary=this.ary[this.cnt];
ary[0].animate(ary[0].data[0],0,this.ms,[0,100]);
ary[0].obj.style.zIndex='0';
if (ary[1]){
ary[1][0].className=ary[1][1];
}
this.cnt=nu;
ary=this.ary[this.cnt];
ary[0].animate(ary[0].data[0],100,this.ms,[0,100]);
ary[0].obj.style.zIndex='1';
if (ary[1]){
ary[1][0].className=ary[1][2];
}
},

Auto:function(srt){
var oop=this;
this.to=setTimeout(function(){ oop.auto(); },srt?this.hold:200);
},

Pause:function(){
clearTimeout(this.to);
},

auto:function(){
var oop=this;nu=this.cnt;
nu=++nu%this.ary.length;
this.GoTo(nu);
this.to=setTimeout(function(){ oop.Auto(); },this.hold);
},

bycls:function(nme,el,tag){
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
}

}

new SS({
ID:'tst',
FrameClassName:'frame',
PanelClassName:'panel',
ActiveClassName:'active',
AnimationSpeed:1000,
AutoRotateHold:10000

});