Помогите исправить верстку слайдера

Всем привет! Слайдер взят из интернета, немного переделал по себя, но мои познания в CSS не достаточны. Блоки слайдера выстроилось вертикально. И автоматически движется только верхняя картинка. Помогите кто нибудь решить. Сайт на DLE.

HTML-код

<div class="slider">

{custom category="1" template="custom" aviable="main" from="0" limit="3" cache="no" order="rand"}

</div>

Код шаблона custom.tpl

<div class="slider-wrapper">

<div style="max-width: 100%; margin: 0px auto;" class="bx-wrapper">

<div style="width: 100%; overflow: hidden; position: relative; height: 300px;" class="bx-viewport">

<ul style="width: 715%; position: relative; left: -500px;" id="slider">

<li style="float: left; list-style: none outside none; position: relative; width: 500px;"><img src="{image-1}" alt="{title}" /></li>

</ul>

</div>

</div>

</div>

<ul id="slider-pager" class="pager">

<li class="active"><a href=""><span><a href="{full-link}">{title}</a></span></a></li>

</ul>

CSS

<style>

* {

padding: 0;

margin: 0;

}

a {

color: #2980D6;

}

.slider {

width: 800px;

margin: 0 auto;

position: relative;

border: 5px solid #DDD;

border-radius: 5px;

padding: 1px;

}

.slider:after {

content: '';

display: table;

clear: both;

}

.slider img {

display: block;

}

.slider-wrapper {

float: left;

width: 500px;

}

.pager {

float: left;

width: 300px;

background: #FAFAFA;

}

.pager li {

list-style: none;

padding: 0 18px;

-moz-box-sizing: border-box;

box-sizing: border-box;

height: 60px;

font: 13px/52px Arial, sans-serif;

border-top: 1px solid #DDD;

position: relative;

}

.pager li:first-child {

border: none;

}

.pager .active {

background: #5BA6E3;

}

.pager .active:before {

content: '';

position: absolute;

top: 0;

left: -30px;

width: 0;

height: 0;

border-style: solid;

border-width: 30px 30px 30px 0;

border-color: transparent #5BA6E3 transparent transparent;

}

.pager a {

display: inline-block;

vertical-align: middle;

line-height: 18px;

color: #2980D6;

text-decoration: none;

}

.pager a:hover {

color: #D00;

}

.pager .active a {

color: #FFF;

}

.pager span {

border-bottom: 1px solid #CCDCEA;

}

.pager .active span {

border-color: #BBD1E3;

}

</style>