Добавить в слайдер переключение по клику на контрол

На странице есть простой слайдер

HTML

<ul id="slider1" class="images-list">
                    <li style="background-image: url('Content/img/bg_10.jpg')"></li>
                    <li style="background-image: url('Content/img/bg_11.jpg')"></li>
                    <li style="background-image: url('Content/img/bg_12.jpg')"></li>
                </ul>

                <ul class="controls">
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                </ul>

jQuery

$.fn.slider = function () {
    var $this = this;
    var $controls = $this.nextAll('.controls').first();
    var index = 0;
    var n = 2;

    $this.find('li:gt(0)').hide();
    setInterval(function () {
        $this.find('li:first-child').fadeOut('slow')
            .next('li').fadeIn('slow')
            .end().appendTo($this);

        $controls.find('li').removeClass('active');         
        index = (index++ == n) ? 0 : index++;
        $controls.find('li').eq(index).addClass('active');  
    },
    4000);
};

$('#slider1').slider();

http://jsfiddle.net/u9d3xa1q/15/

У слайдера есть три контрола, которые просто показывают какой элемент в текущий момент активен. Как добавить в этот слайдер переключение на соответствующий слайд при клике на соответствующий контрол?