34 309 Скрипты / Slider

Smooth Div Scroll - горизонтальная прокрутка контента


jQuery плагин плавной горизонтальной прокрутки контента влево и вправо - Smooth Div Scroll.

Особенности:

  • Поддержка сенсорных устройств, таких как iPhone, iPad и Android смартфонов.
  • Именно плавная прокрутка, а не шагами.
  • Бесконечный цикл, по желанию.
  • Различные методы прокрутки: touch (касанием), хотспот (кнопками ввиде стрелок), колесиком мыши или автоскролинг. Или комбинации методов.
  • Прокрутка контента любого типа, а не только изображений
  • Easing опции для плавного скроллинга.

Как это работает?

Принцип лежащий в основе Smooth Div Scroll прост: один DIV (scrollArea) прокручивается внутри другого DIV (scrollWrapper). Две кнопки-стрелки используемые для запуска прокрутки (scrollingHotSpotLeft и scrollingHotSpotRight). Также есть возможность включения прокрутки используя касание (пальцем) на сенсорном экране, колесиком мышки или же просто включение автопрокрутки. scrollWrapper - определяет какая область из scrollableArea будет видима - всё что за пределами дива scrollWrapper будет скрыто.

Рассмотрим Демо 1 в качестве примера работы плагина.

Мы установили такие параметры у плагина, что пользователь может прокручивать изображения с помощью кнопок-стрелок или с помощью колесика мыши. Также при загрузке страницы сделали автоскроллинг, а при наведении на панель прокрутки скроллинг останавливается. Сенсорная прокрутка для данного дема выключена, попробовать её работу можно в демо "touch скроллер"

HTML

Структура html для этого демо будет такой:

<div id="makeMeScrollable">
    <img src="images/demo/1.jpg" alt="Dead space" id="1" />
    <img src="images/demo/2.jpg" alt="Dead space" id="2" />
    <img src="images/demo/3.jpg" alt="Dead space" id="3" />
    <img src="images/demo/4.jpg" alt="Dead space" id="4" />
    <img src="images/demo/5.jpg" alt="Dead space" id="5" />
    <img src="images/demo/6.jpg" alt="Dead space" id="6" />
    <img src="images/demo/7.jpg" alt="Dead space" id="7" />
    <img src="images/demo/8.jpg" alt="Dead space" id="8" />
</div>

Как видим имеем один контейнер с ID - makeMeScrollable, обращаясь к которому, будем его содержимое, в данном случае изображения (может быть и текст), превращать в прокручивающийся блок.
Для правильного отображения элементов помещенных в этот контейнер нужно указать определенные CSS стили.
Отталкиваться можно, например, от следующего варианта:

#makeMeScrollable div.scrollableArea *
{
    position: relative;
    display: block
    float: left;
    margin: 0;
    padding: 0;
    /* If you don't want the images in the scroller to be selectable, try the following
        block of code. It's just a nice feature that prevent the images from
        accidentally becoming selected/inverted when the user interacts with the scroller. */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

В этом демо нет отступов между картинками, если вам они нужны, то используйте свойство padding, а не margin (который вызывает ошибки в IExplorer).

JS

Для поддержки всех возможностей плагина нужно будет подключить на страницу следующие скрипты и библиотеки:

<!-- jQuery library - Please load it from Google API's -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/jаvascript"></script>
<!-- jQuery UI Widget and Effects Core (custom download)
     You can make your own at: http://jqueryui.com/download -->
<script src="js/jquery-ui-1.8.23.custom.min.js" type="text/jаvascript"></script>
<!-- Latest version (3.0.6) of jQuery Mouse Wheel by Brandon Aaron
     You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
<script src="js/jquery.mousewheel.min.js" type="text/jаvascript"></script>
<!-- jQuery Kinectic (1.5) used for touch scrolling -->
<script src="js/jquery.kinetic.js" type="text/jаvascript"></script>
<!-- Smooth Div Scroll 1.3 minified-->
<script src="js/jquery.smoothdivscroll-1.3-min.js" type="text/jаvascript"></script>

Тут у нас jQuery библиотека, далее jquery ui для пользовательских эффектов, jquery mousewheel для возможности прокрутки с помощью колесика мыши, kinetic для возможности прокрутки касанием (touch) и сам плагин smoothdivscroll.
Вызов плагина в данном примере происходит следующим образом:

<script type="text/jаvascript">
    $(document).ready(function () {
        $("#makeMeScrollable").smoothDivScroll({
            mousewheelScrolling: "allDirections",
            manualContinuousScrolling: true,
            autoScrollingMode: "onStart"
        });
    });
</script>
  • mousewheelScrolling: "allDirections" - прокрутка с помощью колеса мыши по всем направлениям (не все мыши имеют такую возможность)
  • manualContinuousScrolling: true - бесконечный скроллинг, зациклен.
  • autoScrollingMode: "onStart" - автопрокрутка при загрузке страницы, и пауза при наведении курсора на скроллер.

Перечень всех опции будет ниже.

Опции

Опций довольно много, но вы можете установить только те, которые нужны именно вам, остальные параметры будут установлены в режиме - по умолчанию.
(После : (двоеточия) указаны дефолтные значения параметров)

Настройка классов для элементов управления:

  • scrollingHotSpotLeftClass: "scrollingHotSpotLeft" - string - CSS класс для левой горячей кнопки
  • scrollingHotSpotRightClass: "scrollingHotSpotRight" - string - CSS класс для правой горячей кнопки
  • scrollableAreaClass: "scrollableArea"  - string - CSS класс для фактического элемента, который можно прокручивать влево или вправо
  • scrollWrapperClass: "scrollWrapper"  - string - CSS класс для элемента оболочки

Разнообразные варианты:

  • hiddenOnStart: false - boolean (true/false) - Определяет будет ли видимым или скрытым скроллер при загрузке страницы.
  • getContentonload: {} (пустой объект)  - object - используйте эту опцию, чтобы перенести внешнее содержимое в скроллер при загрузке страницы. Данной настройке нужно передать имя метода, который вы хотите использовать для загрузки контента, источник контента, манипуляции методом (как контент будет добавляться в скроллер) и опционально фильтрация тегов (селектор, который используется для фильтрации только определенного контента из контента, который выбран для переноса):

Пример:

$("#makeMeScrollable").SmoothDivScroll({
    getContentonload: {
        method: "getAjaxContent",
        content: "urlToMyAjaxContent.html",
        manipulationMethod: "replace",
        filterTag: "div"
    }
});
  • countOnlyClass: "" (пустая строка) - string - функция, которая вычисляет общую ширину прокручиваемой области, будет рассчитывать ширину только тех элементов, класс которых будет указан в этой опции. Это может быть полезно, если у вас есть контент, который группируется столбиками и только столбики должны быть скроллируемыми. Иначе же плагин суммирует ширину всех элементов в столбцах.

Пример:

$("#makeMeScrollable").SmoothDivScroll({
    countOnlyClass: "myClass"
});

startAtElementId: "" (пустая строка) - string - если вы хотите чтобы скроллер начинался с определенного  элемента, то укажите его CSS идентификатор в этой опции и тогда прокрутка начнется именно с этого элемента, в противном случае прокрутка начнется с первого элемента.

Опции клавиш-стрелок (hot spot):

  • hotSpotScrolling: true - boolean (true/false) - активировать кнопки-стрелки (да/нет)? Если вы хотите использовать touch скроллинг, то лучше задать параметр этой опции в false.
  • hotSpotScrollingStep: 15 - number (в пикселях) - устанавливает размер шага для прокрутки. Большее значение сделают прокрутку быстрее, но менее плавной.
  • hotSpotScrollingInterval: 10 - number (мс) - количество миллисекунд между каждым шагом прокрутки. Большее значение сделает прокрутку медленнее, так как скроллер будет ждать дольше, прежде чем сделать следующий шаг. Параметр можно сравнить с кадрами в фильме, то есть это эквивалент количества кадров в секунду.
  • hotSpotMouseDownSpeedBooster: 3 - number (мультипликатор) - используйте эту опцию, если хотите увеличить скорость, когда пользователь нажимает мышкой на одну из кнопок-стрелок (влево/вправо). 1 - нормальная скорость, 2 - вдвое быстрее, чем нормальная, 3 - в три раза быстрее и так далее. По умолчанию установлено значение 3.
  • visibleHotSpotBackgrounds: "hover" - string - Общие настройки для видимости кнопок:

Возможные значения: "" (пустая строка), "hover", "onStart" или "always".

  1. "" - пустая строка сделает фон кнопок невидимым всегда.
  2. hover - сделает фон кнопок видимым, только при наведении мыши на скроллер.
  3. onStart - делает видимым фон кнопок X-секунд (управляется через опцию hotSpotsVisibleTime) сразу после загрузки страницы, потом они скрываются.
  4. always - фон кнопок (то есть сами кнопки) виден все время.

Важно отметить, что эта опция задает только видимость кнопок, даже установив параметр их невидимости, фактически, кнопки будут по прежнему активны. Если хотите, чтобы кнопки выглядели иначе, то измените их в photoshop и подправьте их CSS, а существующие кнопки станут для вас хорошей отправной точкой для собственных экспериментов.

  • hotSpotsVisibleTime: 5000 - number (мс) - если вы установили параметр "onStart" для опции visibleHotSpotBackgrounds, то по истечении того количества секунд, которое вы укажите тут, фон кнопок станет невидимым.
  • easingAfterHotSpotScrolling:true - boolean (true/false) - если вы хотите использовать easing эффекты после прокрутки вызываемой с помощью кнопок, то поставьте true.
  • easingAfterHotSpotScrollingDistance: 10 - number (в пикселях) - устанавливает расстояние в пикселях которое пройдет скроллер после использования кнопок, для его прокрутки. Большее значение сделает скроллер более плавным и спокойным, меньшее значение параметра придаст точности и жесткости. Рекомендуется вместе с этим параметром, также внести коррективы и в опцию easingAfterHotSpotScrollingDuration.
  • easingAfterHotSpotScrollingDuration: 300 - number (в мс) - устанавливаем время easing эффекта после прокрутки с помощью кнопок. Вместе с этой опцией, неплохо было бы настроить и параметр easingAfterHotSpotScrollingDistance
  • easingAfterHotSpotScrollingFunction: "easeOutQuart" - string - Эта опция определяет easing функцию, которая будет использована в конце прокрутки с помощью кнопок.

Опции прокрутки с помощью колесика мыши

  • mousewheelScrolling:"" - string - определяет будет ли активно колесико мыши для прокрутки и если да, то как она должна работать:

Возможные значения:

  1. "" - пустая строка - возможность прокрутки с помощью колесика отключена
  2. "vertical" - прокрутка привязана только к вертикальной прокрутке колесиком
  3. "horizontal" - прокрутка привязана только к горизонтальной прокрутке колесиком (есть не у всех мышей)
  4. "allDirections" - оба вида, и горизонтальная и вертикальная прокрутка может быть использована на мышке.
  • mousewheelScrollingStep: 70 - number (в px) - число в пикселях на которое будет прокручивать скроллер, когда пользователь будет крутить колесико мыши. (Колесо мыши будет посылать номер, который обычно находится в интервале от -3 до 3 в зависимости от направления). Большее значение приведет к более быстрой прокрутке с помощью колесика за счет большего шага.
  • easingAfterMouseWheelScrolling: true - boolean (true/false) - Будут ли использоватся easing эффекты при прокрутке колесиком? (Да/Нет)
  • easingAfterMouseWheelScrollingDuration: 300 - number (в мс) - определяет время easing эффекта после завершения прокрутки колесиком
  • easingAfterMouseWheelScrollingFunction: "easeOutQuart" - string - устанавливает easing функцию, которая будет использоваться после завершения прокрутки с помощью колесика.

Опции прокрутки с помощью касания (touch)

  • touchScrolling:false - boolean (true/false) - установите true, если хотите использовать возможность прокрутки пальцем на сенсорных устройствах, типа iphone, ipad, android и т.п. Кроме того, зажав кнопку мыши и двигая её, скроллер также можно будет прокручивать. Для работы touch скроллинга нужно будет дополнительно подключить на странице скрипт jquery.kinetic. И рекомендуется отключить опцию hotSpotScrolling, которая не очень хорошо работает на сенсорных устройствах

Опции ручной прокрутки (горячие кнопки, колесико, touch скроллинг)

  • manualContinuousScrolling: false - boolean (true/false) - если установлено true, то ручная прокрутка будет непрерывной влево или вправо. Работает для всех типов: горячие кнопки, колесико или touch.

Опции авто скроллинга

  • autoScrollingMode:"" - string - определяет параметры авто прокрутки:

Возможные значения:

  1. "" (пустая строка) - не используйте эту опцию, или поставьте пустую строку, чтобы отключить автоматическую прокрутку.
  2. "onStart" - прокрутка начнется автоматически после загрузки страницы в соответсвии с опцией autoScrollDirection - определяющей направление, когда Вы переместите указатель мыши на левую или правую горячую клавишу или воспользуетесь колесиком мыши, то автопрокрутка остановится. После этого прокручивать можно будет только с помощью клавиш или колесика.
  3. "always" - горячие клавиши будут отключены, прокрутка будет происходить только в автоматическом режиме.
  • autoScrollingDirection:"endlessLoopRight" - string - опция определяет направление и поведение автоматической прокрутки, и используется только если автоскроллинг включен:

Возможные значения:

  1. "right" - автоскроллинг вправо и остановка на последнем слайде.
  2. "left" - автопрокрутка влево и остановка на последнем слайде. Установка этого параметра на "left" имеет смысл только если Вы установите опцию startAtElementld. Иначе прокрутка начинается с первого слайда и следовательно прокрутка влево не сможет начаться.
  3. "backAndForth" - Автопрокрутка начинается вправо, когда она дойдет до конца, произойдет автоматическая смена направления и прокрутка пойдет влево и т.д., как в пинг-понг.
  4. "endlessLoopRight" - автоматическая непрерывная прокрутка вправо
  5. "endlessLoopLeft" - автоматическая непрерывная прокрутка влево
  • autoScrollingStep:1 - number (в px) - устанавливает длину шага для автопрокрутки. Большее значение сделает прокрутку быстрее, но и сделает её менее плавной.
  • autoScrollingInterval:10 number (в мс) - устанавливает количество миллисекунд между шагами прокрутки. Большее значение сделает прокрутку медленнее, так как прокрутка будет ждать дольше времени, прежде чем сделать следующий шаг. Данный параметр можно сравнить с количеством кадров в секунду в фильме.

Опции для метода scrollToElement

  • scrollToAnimationDuration:1000 - number (в мс) - устанавливает время анимации прокрутки до конкретного элемента
  • scrollToEasingFunction:"easeOutQuart" - string - определяет какая easing функция будет использоваться
Скачать 8613Загрузок 1,74 Mb
Демо
Ссылки
http://www.smoothdivscroll.com/index.html

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи

Slider Pro - адаптивный слайдер с миниатюрами.
Slider
Elastislide - слайдер
Slider
Прокрутка изображений
Slider
Горизонтальная прокрутка
Slider
Прокрутка картинок и заголовков к ним, как на amazon
Slider