Плагин GitHub Slider JQuery

Новая навигационная система Github HTML5 и CSS3 (HTML5 History API) велика: https://github.com/blog/760-the-tree-slider

Какой плагин JQuery они используют для создания эффекта слайда пользовательского интерфейса? Или, может быть, аналогичный (Jquery Slide с загрузкой Ajax)

Спасибо

Ответ 1

Я просмотрел их исходный код, и они НЕ используют CSS3 или плагин. Он использует анимацию jquery. И фрагменты кода, которые они дают в Github blog, являются хорошим началом, но обработчик popstate вводит в заблуждение. Вместо этого попробуйте:

$(window).bind('popstate', function (e) {
    if (e.originalEvent.state && e.originalEvent.state.path) {
        $.get(e.originalEvent.state.path, function(data) {
            $('#slider').slideTo(data);      
        });
        return false;
    }
    return true;
}

Фактическое скольжение использует больше трюков:

set #slider overflow: hidden
получить ширину раздела для анимации.
создайте передачу div дважды этой ширины (передача).
скопируйте содержимое исходного div в temp div (текущий).
поместите новое содержимое в другую временную строку div (далее).
помещать ток и следующий бок о бок в передачу.
удалить содержимое из оригинального div и поместить новый перевод div в (должен выглядеть одинаково).
animate transfer div - новый вид завершен.
заменить исходное содержимое div новыми данными (выглядит так же, как и предыдущий шаг).

Здесь слайд слева:

$.fn.slideTo = function(data) {
    var width = parseInt($('#slider').css('width'));
    var transfer = $('<div class="transfer"></div>').css({ 'width': (2 * width) + 'px' });
    var current = $('<div class="current"></div>').css({ 'width': width + 'px', 'left': '0', 'float': 'left' }).html($('#slider').html());
    var next = $('<div class="next"></div>').css({ 'width': width + 'px', 'left': width + 'px', 'float': 'left' }).html(data);
    transfer.append(current).append(next);
    $('#slider').html('').append(transfer);
    transfer.animate({ 'margin-left': '-' + width + 'px' }, 300, function () {
        $('#slider').html(data);
    });
}

И вот рабочий пример: Пример слайдера. Нажмите на меню браузера, который поддерживает историю. Я начал использовать CSS3, но обнаруживать, когда переход/преобразование завершено, легче с помощью обратного вызова jquery animate.

Ответ 2

Думаю, это поможет вам.

jquery.sliders

Ответ 3

проверьте этот вариант, который вам может понравиться. очень простой слайдер.

https://github.com/Yene-Me/Slider-Menu