вопрос слайдера jQuery

Question

Я очень новичок в jQuery, и поэтому я попытался следовать этому учебнику , а затем попытался настроить его под себя.Но я не очень успешен.Прежде всего, у меня есть один и тот же слайдер больше раз на одной странице.Первый слайдер работает правильно, но другой слайдер не будет работать.Если вы выполните прокрутку, она будет продолжаться немного, поэтому вы выбираете фон вместо изображений.Если вы хотите, чтобы сайт работал, вместо этого здесь это , и я не знаю, является ли это проблемой css: S

Вот код HTML:

div id="sliderTab1">                        
        <div class="scroll-pane">
            <div class="scroll-content">
                <?php include("designRetouch.php")?>
            </div>
            <div class="scroll-bar-wrap">
                <div class="scroll-bar"></div>
            </div>
        </div>    
    </div> 

и 3еще раз.

Вот jQuery для полосы прокрутки ползунка и как показать ползунок

        function sizeScrollbar(){
        var remainder = scrollContent.width() - scrollPane.width();
        var proportion = remainder / scrollContent.width();
        var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );

        scrollbar.find(".ui-slider-handle").css({
            width : handleSize,
            "margin-left":-handleSize/2,
        });
        handleHelper.width("").width(scrollbar.width() - handleSize);
    }

и ...

$("#tab1").click(function(){
        $('li[id^="tab"]').removeClass('current');
            $("#tab1").addClass('current');

        $('div[id^="sliderTab"]').hide();
            $('#sliderTab1').slideToggle('slow');
    });

Answer 1

Исправлена ​​проблема, создавая по одной странице для каждого слайдера. Не выяснил, в чем проблема, но это сработало.

Answer 2

Без тестирования, но из аналогичного опыта вам нужно будет присвоить каждому sliderTab свой идентификатор, такой как

Затем вам нужно будет запустить инициализированную функцию jquery для запуска каждого из них.один, такой как:

 $("#tab1").click(function(){
    $('li[id^="tab"]').removeClass('current');
        $("#tab1").addClass('current');

    $('div[id^="sliderTab"]').hide();
        $('#sliderTab1').slideToggle('slow');
});

$("#tab1").click(function(){
    $('li[id^="tab"]').removeClass('current');
        $("#tab2").addClass('current');

    $('div[id^="sliderTab"]').hide();
        $('#sliderTab2').slideToggle('slow');
});

и так далее.по крайней мере, там я бы начал.