Adaptor – jQuery 3D slider

Adapter - легкий jQuery slider контента, который используется длясоздания красивой 2D или 3D анимации перелистывания слайдов.

Сложность

Поддержка

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

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

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

Создайте 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 будет расположен статически, то плагин поменяет свойство position на 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 режим прокрутки. Когда jQuery слайдер приостановлен, для элемента будет установлен класс 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, который содержит все отдельные параметры слайдов, третий параметр - настройки jquery slider.

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)

Данный метод является не обязательным и служит для сброса состояния jquery slider.

adaptor.reset($box, settings) {
}

Пример настройки jQuery slider

Ниже приведен пример простого 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));

ДЕМО СКАЧАТЬ Перевод статьи jquery-box-slider

 

Тэги: slider

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.