Как добавить навигатор в слайдер jquery

Question

Я написал свой собственный слайдер, он очень прост.

<script type="text/javascript">
    $(document).ready(function() {      
        $('#sliders .slidermain:first').removeClass('hide');
        slider();
    });

    function slider() {
        $('#sliders .slidermain').css({ opacity: 0.0 });
        $('#sliders .slidermain:first').css({ opacity: 1.0 });
        setInterval('show()',7000);
    }

    function show() {
        var current;
        if(#sliders .slidermain.show) {
            current = $('#sliders .slidermain.show');
        }
        else {
            current = $('#sliders .slidermain:first'));
        }

        var next;
        if (current.next().length) {
            next = current.next('#sliders .slidermain');
        }
        else {
            next = $('#sliders .slidermain:first');
        }

        next.css({opacity: 0.0})
            .removeClass('hide')
            .addClass('show')
            .animate({opacity: 1.0}, 1000);

        current.animate({opacity: 0.0}, 1000)
            .removeClass('show')
            .addClass('hide');
    }
</script>

Теперь я хочу добавить к этому ползунку nagiator. Например: если я нажму li с rel=1, я хочу, чтобы появился div с rel=1. Я уже писал это:

var clicked;
$("#sliders #navi li").click(function()  {
    clicked = $(this).attr('rel')
},
function() {
    next = $("#sliders .slidermain [rel=clicked]");
});

Но это не работает. Не могли бы вы дать мне несколько советов?

Вот jsFiddle с кодом: http://jsfiddle.net/3wAHQ/2/

Answer 1

Я думаю, что вы ищете, это простой плагин jQuery:
http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

Он делает все, что вы просите, с помощью «навигатора», я верю.
Демо здесь один пример