[Anton Essential]

Доброе Утро ! Сегодня решил написать мини слайдер , в общем получился огромнейший код ,
причем такой армейский, как говориться перекладываем с места на место.
Имеется див с слайдами и див с переключателями, по умолчанию 3 дива с слайдами стоят как дисплей нон , по событию клик один слайд уходит влево а второй появляется и при этом к кружку на который был произведен клик добавляется класс селектед а с пред идущего убирается . В общем намутил я дерибасов в скрипте , такой советский код получился . Я так полагаю мои эти мутки можно сократить . По возможности, помогите решить мою задачу.
С уважением Антон.

<div class="medium-slider-wrap">
    <div class="medium-slide-1">
        <a href="#"><img src="images/logo-1.png" alt="logo"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo"></a>
    </div>
    <div class="medium-slide-2">
        <a href="#"><img src="images/logo-1.png" alt="logo"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo"></a>
    </div> 
    <div class="medium-slide-3">
        <a href="#"><img src="images/logo-1.png" alt="logo"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo"></a>
    </div> 
    <div class="medium-slide-4">
        <a href="#"><img src="images/logo-1.png" alt="logo"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo"></a>
    </div>     
</div>
<div class="switch">
    <ul>
        <li class="sl-1"><a class="selected"></a></li>
        <li class="sl-2"><a></a></li>
        <li class="sl-3"><a></a></li>
        <li class="sl-4"><a></a></li>
    </ul>
</div>

// JavaScript Document
$(document).ready(function() {
	$('.sl-1').click(function(){
		$(".sl-1 > a").addClass('selected'),
		$(".sl-2 > a").removeClass('selected'),
		$(".sl-3 > a").removeClass('selected'),
		$(".sl-4 > a").removeClass('selected'),
		$(".medium-slide-2" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-3" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-4" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-1" ).show( "slide",{ direction: "right" }, 500 );
	});
	$('.sl-2').click(function(){
		$(".sl-2 > a").addClass('selected'),
		$(".sl-1 > a").removeClass('selected'),
		$(".sl-3 > a").removeClass('selected'),
		$(".sl-4 > a").removeClass('selected'),
		$(".medium-slide-2" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-3" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-1" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-2" ).show( "slide",{ direction: "right" }, 500 );
	});
		$('.sl-3').click(function(){
		$(".sl-3 > a").addClass('selected'),
		$(".sl-1 > a").removeClass('selected'),
		$(".sl-2 > a").removeClass('selected'),
		$(".sl-4 > a").removeClass('selected'),
		$(".medium-slide-2" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-4" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-1" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-3" ).show( "slide",{ direction: "right" }, 500 );
	});
		$('.sl-4').click(function(){
		$(".sl-4 > a").addClass('selected'),
		$(".sl-2 > a").removeClass('selected'),
		$(".sl-3 > a").removeClass('selected'),
		$(".sl-1 > a").removeClass('selected'),
		$(".medium-slide-2" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-3" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-1" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-4" ).show( "slide",{ direction: "right" }, 500 );
	});
});