Lecaw

Учимся создавать Web-сайты

Adaptor – jQuery 3D слайдер

November 2, 2012 635hits

Adapter - легкий слайдер контента, который предоставляет простой интерфейс разработчикам для создания красивой 2D или 3D анимации перелистывания слайдов.

Исходные файлыДЕМО 

 

 

Поддержка

В настоящее время имеется поддержка 3D свойств в браузерах webkit и Firefox, все другие браузеры будут использовать fallback.

Все 2D переходы были протестированы в IE6 + и других современных браузерах.

Использование

Создайте HTML разметку с контейнером, который содержит все необходимые слайды:

<div class="slider-viewport"> 
<div id="content-box"><!-- 3d контейнер -->
<figure><!-- слайд -->
<img src="/img/slide-1.png">
<figcaption>This is slide one's description</figcaption>
</figure>
<figure>
<img src="/img/slide-2.png">
<figcaption>This is slide two's description</figcaption>
</figure>
<figure>
<img src="/img/slide-3.png">
<figcaption>This is slide three's description</figcaption>
</figure>
<figure class="slide">
<img src="/img/slide-4.png">
<figcaption>This is slide four's description</figcaption>
</figure>
</div>
</div>

Технически, никакой CSS не требуется, но если внешний div.slider-viewport будет расположен статически, то плагин применит relative позиционирование. Нужно отметить, что область просмотра и основное поле должны быть такого же размера, как и слайды, чтобы вращение не начиналось от центра. Это также поможет ограничить размер области просмотра.

.slider-viewport { width: 560px; height: 380px; overflow: hidden }

Подключите box-slider.jquery.js и другие сценарии в заголовке документа.

$('#content-box').boxSlider( /* опции */ );

Опции

  • speed (по умолчанию: 800) Время работы анимации
  • autoScroll (по умолчанию: false) Автоматическое перелистывание слайдов
  • timeout (по умолчанию: 5000) Время между анимацией
  • pause (по умолчанию: null) DOM элемент, jQuery объект или селектор для элементов, который при нажатии переключает autoscoll режим прокрутки. Когда слайдер приостановлен, для элемента будет установлен класс paused
  • pauseOnHover (по умолчанию: false) Приостанавливает автопрокрутку при наведении курсора
  • next (по умолчанию: null) DOM элемент, jQuery объект или селектор для элементов, при щелчке отображает следующий слайд
  • prev (по умолчанию: null) DOM элемент, jQuery объект или селектор для элементов, при щелчке отображает предыдущий слайд
  • effect (default: 'scrollVert3d') Тип анимации

Методы

showSlide

Отображает слайд по указанному индексу

$('#content-box').boxSlider('showSlide', 3); // отобразит четвертый слайд

playPause

Включение/выключение автопрокрутки

$('#content-box').boxSlider('playPause');

option

Установка определенных настроек:

$('#content-box').boxSlider('option', 'speed'); 
$('#content-box').boxSlider('option', 'speed', 1200); 

destroy

Выключает плагин для выбранных слайдов

$('#content-box').boxSlider('destroy');

next

Перемещение к следующему слайду

$('#content-box').boxSlider('next');

prev

Перемещение к предыдущему слайду

$('#content-box').boxSlider('prev');

События

onbefore

Параметр функции будет связан с полем jQuerified. Первый параметр - отображение текущего слайда, второй параметр – использование текущего индекса слайда, третий параметр – использование следующего индекса слайда.

$('#content-box').boxSlider('option', 'onbefore', function ($currentSlide, $nextSlide, currIndex, nextIndex) {
});

onafter

Параметр функции будет связан с полем jQuerified. Первый параметр - отображение предыдущего слайда, второй параметр – использование текущего индекса слайда, третий параметр – использование следующего индекса слайда.

$('#content-box').boxSlider('option', 'onafter', function ($previousSlide, $currentSlide, currIndex, nextIndex) {
});

Эффекты

Различные способы анимации используются в методе registerAnimator. Если плагин поддерживает несколько эффектов анимации, то они должны быть переданы как список со значениями через запятую.

$.fn.boxSlider('registerAnimator', 'effectName', AnimatorObject); 
window.jqBoxSlider.registerAnimator('effect1,effect2' AnimatorObject); 

Анимация слайдов реализована в следующем интерфейсе и должна придерживаться некоторых определенных правил.

onfigure(Boolean supports3D, String vendorPrefix)

Этот метод не является обязательным и вызывается во время процесса регистрации плагина. Параметр supports3D определяет, поддерживает ли браузер CSS 3D transforms, параметр vendorPrefix задает префиксы для текущего браузера, если такие существуют, например '-moz-', '-webkit-'.

adaptor.configure = function (supports3D, vendorPrefix) {
};

initialize(jQuery $box, jQuery $slides, Object settings)

Этот метод устанавливает начальное состояние каждому слайду. Первый параметр $box, задает состояние основного окна, второй параметр является jQuery объектом $slides, содержит все отдельные параметры слайдов, и третий параметр - настройки слайдера.

adaptor.initialize = function ($box, $slides, settings) {
};

В процессе инициализации вы можете установить атрибут _slideFilter, который будет использоваться для фильтрации набора слайдов ($slides).Пример этого можно увидеть в box-slider-fx-blinds.js.

adaptor.initialize = function ($box, $slides, settings) {
  settings._slideFilter = function (index, settings) {
    return this.get(index) !== settings.$blinds;
  }
};

transition(Object settings)

Этот метод устанавливает параметры перехода.

{
    $box: 
  , $slides:
  , $currSlide: 
  , $nextSlide: 
  , reverse: 
  , currIndex:
  , nextIndex: 
}

Этот метод должен использоваться в браузерах, которые не поддерживают 3D transforms. и

adaptor.transition = function (settings) {
  return { mycustomsetting: 'value' };
};

reset(jQuery $box, Object settings)

Этот метод не является обязательным и служит для сброса состояния плагина.

adaptor.reset($box, settings) {
}

_cacheOriginalCSS(jQuery $el, String name, Object settings, Array extraAttributes)

Вам не нужно определять этот метод, так как он будет зарегистрирован через вызов registerAnimator. Этот метод будет кэшировать оригинальный CSS указанного JQuery объекта в настройках bssettings, установленные для слайдера, так что оригинальный CSS может быть применен, когда плагин будет выключен. По умолчанию кэшируются следующие CSS атрибуты position, top, left, display, overflow, width, height. Любые другие атрибуты должны быть переданы в виде массива или строки в параметре extraAttributes.

adaptor.initialize = function ($box, $slides, settings) {
  adaptor._cacheOriginalCSS($box, 'box', settings);
  adaptor._cacheOriginalCSS($slides, 'slides', settings, [
      vendorPrefix + 'transform'
    , vendorPrefix + 'transition'
  ]);
}

Пример настройки плагина

Ниже приведен пример простого 2D перехода с эффектом исчезновения.

;(function (w, $, undefined) {
  w.jqBoxSlider.registerAnimator('fade', (function () {
    var adaptor = {};
    adaptor.initialize = function ($box, $slides, settings) {
      adaptor._cacheOriginalCSS($box, 'box', settings);
      adaptor._cacheOriginalCSS($slides, 'slides', settings);
      if ('static auto'.indexOf($box.css('position')) !== -1) {
        $box.css('position', 'relative');
      }
      $box.css({height: $slides.eq(0).height(), overflow: 'hidden'});
      $slides
        .css({ position: 'absolute', top: 0, left: 0 })
        .filter(':gt(0)').hide();
    };
    adaptor.transition = function (settings) {
      settings.$nextSlide.fadeIn(settings.speed);
      settings.$currSlide.fadeOut(settings.speed);
    };
    adaptor.destroy = function ($box, settings) {
      $box.children().css(settings.origCSS.slides);
      $box.css(settings.origCSS.box);
    };
    return adaptor;
  }()));
}(window, jQuery || Zepto));

Исходные файлыДЕМО 

Дополнительная информация

RATTING:
(0 голосов)

Медиа

Комментарии

#1 sergii 29.11.2012 15:01
Спасибо, добавил к себе profi-rus.narod.ru/
Цитировать