Jquery Anything Slider Nav Bar Обратный вызов - PullRequest
Новая
       30

Jquery Anything Slider Nav Bar Обратный вызов

0 голосов
/ 16 июня 2011

Я создал пользовательскую функцию навигационной панели для Anything Slider, которая будет переключать слайды в зависимости от того, какая кнопка нажата.Мне также нужно написать что-то, что будет переключать «текущий» класс, когда нажата одна из стрелок ползунка, но я не могу найти имя события, чтобы найти или где вставить функцию обратного вызова.

Любая помощьбудет оценено.Я включил функцию навигационной панели, если она помогает. 

$('nav ul li').click(function(){ 

    $('nav ul li').removeClass('current'); // reset current menu button

        var slideName = $(this).attr('class'); // get class name

        $(this).toggleClass('current'); // make button current

        $('section.about_us').fadeOut('slow');
        $('#about_us_container').fadeOut('slow', function(){ // hide about us page

        switch (slideName){ //change slide
            case 'navItem1':
                $('#slider').anythingSlider(1);
                    break;
            case 'navItem2':
                $('#slider').anythingSlider(2);
                break;
            case 'navItem3':
                $('#slider').anythingSlider(3);
                break;
            case 'navItem4':
                $('#slider').anythingSlider(4);
                break;
            case 'navItem5':
                $('#slider').anythingSlider(5);
            default:
                //do nothing
        }
    });
});

Ответы [ 2 ]

1 голос
/ 07 июля 2011

Вы можете просто использовать опцию appendControlsTo, и плагин сделает всю работу ( demo ).

В последней версии AnythingSlider (версия 1.7+) вы можете добавлять стрелки (отдельно), панель управления (навигация + кнопка воспроизведения), навигацию или просто кнопку воспроизведения к любому элементу на страница.

Или, если вам нужно сохранить свое меню без изменений, попробуйте это ( demo ): 

$('#slider').anythingSlider({
    // If true, builds a list of anchor links to link to each panel
    buildNavigation: false,
    onSlideComplete: function(slider){
        $('nav ul li').eq(slider.currentPage-1).trigger('click');
    }
});

$('nav ul li').click(function() {
    // prevent infinite loop
    if ($(this).is('.current')) { return; }

    $('nav ul li').removeClass('current'); // reset current menu button
    var slideName = $(this).attr('class'); // get class name
    $(this).toggleClass('current'); // make button current

    $('#slider').anythingSlider(slideName.slice(-1));
});
0 голосов
/ 16 июня 2011

Просматривая источник плагина, я не думаю, что он передает события, когда стрелки нажимаются. Это было бы очень легко добавить, но если вы не хотите изменять плагин, после запуска кода плагина вы можете просто привязать свои собственные обработчики нажатий к стрелкам, а затем в этих обработчиках получить текущую страницу и количество страниц через внешний API AnythingSlider: 

var current = $('#slider').data('AnythingSlider').currentPage
var pages = $('#slider').data('AnythingSlider').pages

Обратите внимание, что var current предоставит номер страницы до клика, поэтому вам нужно будет добавить или вычесть один и убедиться, что вы правильно обрабатываете конец диапазона. Затем, определив реальную текущую страницу, вы сможете применить класс current к желаемому LI.

.

В качестве отступления: поскольку вы собираетесь добавлять текущий класс к этим LI, я думаю, что у вас возникнут проблемы с вашим оператором switch, когда $(this).attr('class') возвращает 'navItem2 current' вместо 'navItem2'. Некоторый рефакторинг этого, вероятно, избавит вас от боли позже.

...