Главная
›
Новости
Настроика и все параметры jquery плагина caroufredsel
Опубликовано: 01.09.2018
circular |
true |
Boolean |
Определяет длжен ли слайдер быть цикличным (действие при достижении последнего элемента слайдера, остановиться либо вернуться к первому элементу). |
infinite |
true |
Boolean |
Определяет длжен ли слайдер быть «безконечным» (действие при достижении последнего элемента слайдера, вернуться к первому элементу либо подставить первый элемент без прерывания цикла) .
p.s.: можно использовать circular:fale и infinite:true вместе,но circular:true и infinite:false вместе использовать не получится. |
responsive |
false |
Boolean |
Должен ли слайдер быть «отзвычивым»
responsive. Если параметр равен true то слайды заполнят весь родительский элемент |
direction |
«left» |
String |
Определяет направление прокрутки.
Возможные значения: "right", "left", "up" или "down". |
width |
null |
Number |
Ширина слайдера.
Если равна null — будет растягиваться. |
String |
Для автоматического изменения размера контейнера слайдов при прокрутке элементов с переменной шириной "variable". |
String |
Введите "auto" для автоматического изминения ширины. |
String |
Значение в процентах (для «резинового» слайдера).
p.s.: Применяется только для горизонтальных слайдеров.
Например: "100%". |
height |
null |
Number |
Высота слайдера.
Если null, высота применяется переменная высота (будет установлена "variable" в зависимости от высоты родителького контейнера). |
String |
Введите "variable" автоматически изменить высоту в пределах родительского элемента. |
String |
"auto" уналедует высоту роителького элемента . |
String |
Для автоматического изменения размера можно указать высоту в процентах.
p.s.: Применяется только для вертикальных слайдеров.
Например: "100%". |
align |
«center» |
String |
для выравнивания элементов внутри родительского элемента с фиксированной шириной / высотой.
Возможные значения: "center", "left", "right" or false. |
padding |
null |
Number |
Отступ (top, right, bottom and left). |
Array |
Значение можно передать массивом значений.
Например [10, 20, 30, 40] (top, right, bottom, left)
или [0, 50] (top/bottom, left/right). |
synchronise |
null |
String |
Селектор для синхронизации нескольких слайдеро (с помощью этого параметра не всегда можно добиться желаемого эффекта, но иногда бывает может пригодится, рекомендую попробовать как это рабоает перед тем как применять) |
Array |
формат приминения параметров:[string selector, boolean inheritOptions, boolean sameDirection, number deviation]Например: ["#foo2", true, true, 0] |
Array |
Принимает колекции в виде масива. |
cookie |
false |
Boolean |
Определяет, должна ли прокрутка начаться с места на котором она остановилась в прошлый раз. Значение хранится в куках до закрытия браузера. |
String |
Имя cookie для предотвращения конфликтов при использовании нескольких крутилок. |
data = {
'width', // Новое значение ширины карусели.
'height' // Новая высота для карусели.
}; |
items |
Object |
Возможные значения: visible, minimum, start, width, height и filter. |
visible |
null |
Number |
Количество видимых элементов.
Если null, количество слайдов будет переменным. |
String |
Вводить "variable" чтобы определить количество видимых элементов (На основе имеющегося размера). |
Object |
Параметры для min и max значений. |
String |
Строка, состоящая из трех секций:
Первый последний:"odd", "even" или "" что бы установить дефолтное значение.
Модификаторы:"+" или "-".
Количество элементов после модификатора: любое количество (1 по умолчанию)
Например: "odd+2" будет выводить количество элементов, необходимое, чтобы заполнить имеющуюся ширину , уменьшит это значение до нечетного числа и увеличит его на два.
|
Function |
Функция, которая возвращает количество видимых элементов.
Эта функция получает 1 параметр:
visibleItems: количество элементов, которые будут поместишихся ширине слайдера.
|
minimum |
null |
Number |
Минимальное количество слайдов, необходимых для создания карусель.
Если null, числоэлементов наследуется и увеличивается на 1. |
start |
0 |
Number |
Номер слайда с которого следует начать прокрутку.p.s.: Может быть отрицательным числом. |
String |
Вводить "random" чтобы начать прорутку со случано выбраного слайда. |
String |
Селектор элемента, с которого нужно начать слайдшоу.
Например: "#foo li:first". |
jQuery-object |
Тоже самое но передается JQuery-объектом.
Например: $("#foo li:first"). |
Boolean |
Если ‘true’, то плагин будет искать якорь, чтобы начать с элемента переданого в url.
Например: http://domain.com#startitem |
Array |
Массив из вариантов таком же порядке как они перечислены выше должны быть проверены на допустимость значения. |
width |
null |
Number |
Ширина элементов.
Если ‘null’, будет установленная переменная ширина. |
String |
Введите «variable» для создания из слайдов переменой ширины. |
String |
Введите процентное значение что бы ширина изменялась при изминении ширины окна браузера.
Примечание: Применяется только на отзывчивых («responsive»), вертикальных слайдерах.
Например: "50%". |
height |
null |
Number |
Высота слайдов.
Если ‘null', будет установлена переменная высота ("variable") |
String |
Введите "variable" для создания слайдера со слайдами переменной высоты. |
String |
Высота в процентах для изминения высоты слайда в звисимости от высоты окна браузера.
Примечание: Применяется только на отзывчивых, горизонтальных слайдшоу.
Например: "50%". |
filter |
null |
String |
Параметры котрым должен соответсвоать элемент что бы быть слайдом.
Если null, то все элементы внутри слайдера будут считаться слайдами.
Если параметр содержит :hidden-elements, то они будут установленны в ":visible". Эта опция не применима к не зацикленным слайдерам. |
Number |
Номер выдимого элемента слайдера items.visible. |
String |
Введите "variable" для того что бы заполнить слайдер переменным числом элементов в зависимости от его ширины. |
scroll |
Object |
Параметр определяющий конфигурацию прокрутки, параметры: items, fx, easing, duration, pauseOnHover, queue, event, conditions, onBefore, onAfter, onEnd. |
items |
null |
Number |
Число элементов для прокрутки .
Если null, то используется число видимых элементов слайдера (сколько помещается , столько и крутится). |
String |
Введите "page" для вывода навигации типо — предыдущая/следующая . |
String |
Стока состоящая из трех элементов:
base:"odd", "even" (четный, нечетный ) или ""(пустая строка по умолчанию).
adjustment:"+" или "-".
amount:любое число (1 по умолчанию)
Например: "odd+2" четный элемент + 2.
|
fx |
«scroll» |
String |
Указывает, какой эффект использовать для перехода .
Возможные значения: "none", "scroll", "directscroll", "fade", "crossfade", "cover", "cover-fade", "uncover" или "uncover-fade". |
easing |
«swing» |
String |
Указывает какой функцией пользоваться для при замедлении перехода. jQuery — функци по умолчанию: "linear" and "swing", built in: "quadratic", "cubic" and "elastic". |
duration |
500 |
Number |
Устанавливает эффект замедления эффекта.
Если менее число меньше 10 то интерпретируется как скорость ( пикселей в миллисекунду ). |
pauseOnHover |
false |
Boolean |
Определяет, должен ли быть приостановлена прокрутка при событии «onMouseOver» . |
String |
Enter "resume" to let the timeout resume instead of restart «onMouseOut». |
String |
Enter "immediate" to immediately stop «onMouseOver» and resume «onMouseOut» a scrolling carousel. |
String |
Enter "immediate-resume" for both the options above. |
queue |
false |
Boolean |
Д олжна ли быть быть изменена очередь , если слайдер в настоящий момент анимирован (движется) . |
String |
Введите "first" если хотите изменить состояние очереди только при следующей интерации. |
String |
Введите «last» в очереди останется только последний элемент ( все будут удалены ) . |
event |
«click» |
String |
Событие что бы вызвать прокрутку к предыдущему следующему элементу. |
conditions |
null |
Function |
Функция которая проверяет должен ли слайдер начать прокрутку.
если функция не вернет true, слаудер не начнет прокрутку. Эта функция получает один параметр : из списка ниже |
direction // Направление. |
onBefore |
null |
Function |
Функция которая выполнится перед прокруткой слайдера |
data = {
'width', // The new width for the carousel.
'height', // The new height for the carousel.
'items': {
'old', // A jQuery-object of the items that are visible before scrolling.
'skipped', // A jQuery-object of the items between the old and new items.
'visible' // A jQuery-object of the items that will be visible after scrolling.
},
'scroll': {
'items', // The number of items scrolled.
'direction', // The direction of the transition.
'duration' // The duration of the transition.
}
}; |
onAfter |
null |
Function |
Function that will be called right after the carousel finished scrolling.
This function receives the same parameter as the onBefore-callback function. |
onEnd |
null |
Function |
Function to call when a non-circular carousel reaches its start or end.
This function receives one parameter: |
direction // The direction of the transition. |
Number |
A number for scroll.items or -if greater than 50- for scroll.duration. |
String |
A string for scroll.easing. |
auto
Click to hide the options for this object. |
Object |
A map of the configuration used for automatic scrolling: play, button, timeoutDuration, delay, progress, items, fx, easing, duration, pauseOnHover, pauseOnEvent, pauseOnResize, queue, event, conditions, onBefore, onAfter, onEnd, onTimeoutStart, onTimeoutEnd and onTimeoutPause.
This object is the same as the scroll object, except for play, button, timeoutDuration, delay, progress, pauseOnEvent, pauseOnResize, onTimeoutStart, onTimeoutEnd and onTimeoutPause. What is not specified in this object, will be inherited from the scroll object. |
play |
true |
Boolean |
Determines whether the carousel should scroll automatically or not. |
button |
null |
String |
A jQuery-selector for the HTML element that should toggle the carousel between playing and paused. |
jQuery-object |
A jQuery-object of the HTML element that should toggle the carousel between playing and paused. |
Function |
A function that returns any of the other valid values. |
timeoutDuration |
5 * [auto.duration] |
Number |
The amount of milliseconds the carousel will pause.
If auto.duration is less then 10 -to use a speed (in pixels/milliseconds) instead of a duration-, the default value is 2500. |
delay |
0 |
Number |
Additional delay in milliseconds before the carousel starts scrolling the first time.
Hint: This can also be a negative number. |
progress |
false |
Object |
A map for bar, updater and interval. |
bar |
null |
String |
A jQuery-selector for the HTML element that should be passed to the updater-callback function. |
jQuery-object |
A jQuery-object for the HTML element that should be passed to the updater-callback function. |
updater |
$.fn.carouFredSel.progressbarUpdater |
Function |
Function that will be called to update the progressbar.
This function receives one parameter: |
percentage // A percentage of the time passed in the timeout (from 0 to 100). |
interval |
50 |
Number |
The amount of milliseconds the between triggering the updater-callback function. |
String |
A string for auto.progress.bar. |
jQuery-object |
A jQuery-object for auto.progress.bar. |
items |
[scroll.items] |
См. описание scroll.items. |
fx |
[scroll.fx] |
См. описание scroll.fx. |
easing |
[scroll.easing] |
См. описание for scroll.easing. |
duration |
[scroll.duration] |
См. описание scroll.duration. |
pauseOnHover |
[scroll.pauseOnHover] |
См. описание scroll.pauseOnHover. |
pauseOnEvent |
false |
Boolean |
Determines whether the timeout between transitions should be paused when the event on the button is triggered.
See the description for scroll.pauseOnHover. |
pauseOnResize |
true |
Boolean |
Determines whether the timeout between transitions should be paused when resizing the window.
Note: Only applies on responsive carousels. |
queue |
[scroll.queue] |
См. описание scroll.queue. |
event |
[scroll.event] |
См. описание scroll.event. |
conditions |
[scroll.conditions] |
См. описание scroll.conditions. |
onBefore |
[scroll.onBefore] |
См. описание scroll.onBefore. |
onAfter |
[scroll.onAfter] |
См. описание scroll.onAfter. |
onEnd |
[scroll.onEnd] |
См. описание scroll.onEnd. |
onTimeoutStart |
null |
Function |
Function that will be called when starting the pausing-timer.
This function receives 2 parameters:
percentage: The percentage the auto.timeoutDuration is at.
duration: The remaining time left in milliseconds.
|
onTimeoutEnd |
null |
Function |
Function that will be called when ending the pausing-timer.
Functionality is the same as for the onTimeoutStart-function. |
onTimeoutPause |
null |
Function |
Function that will be called when pausing the pausing-timer.
Functionality is the same as for the onTimeoutStart-function. |
Boolean |
True or false for auto.play. |
Number |
A number for auto.timeoutDuration. |
prev
Click to hide the options for this object. |
Object |
A map of the configuration used for scrolling backwards using the «previous» button or key: button, key, items, fx, easing, duration, pauseOnHover, queue, event, conditions, onBefore, onAfter and onEnd.
This object is the same as the scroll object, except for button and key. What is not specified in this object, will be inherited from the scroll object. |
button |
null |
String |
A jQuery-selector for the HTML element that should scroll the carousel backward. |
jQuery-object |
A jQuery-object of the HTML element that should scroll the carousel backward. |
Function |
A function that returns any of the other valid values. |
key |
null |
Number |
The keyCode of the keyboard-key that should scroll the carousel backward. |
String |
Can be: "up", "down", "left" or "right". |
items |
[scroll.items] |
See the description for scroll.items. |
fx |
[scroll.fx] |
See the description for scroll.fx. |
easing |
[scroll.easing] |
See the description for scroll.easing. |
duration |
[scroll.duration] |
See the description for scroll.duration. |
String |
Enter "auto" to let the plugin calculate a speed for the transition instead of using a duration. This could be desirable when using the slideTo event.Note: The speed is calculated by deviding scroll.duration by scroll.items and multiplying it with the amount of items to scroll. |
pauseOnHover |
[scroll.pauseOnHover] |
See the description for scroll.pauseOnHover. |
queue |
[scroll.queue] |
See the description for scroll.queue. |
event |
[scroll.event] |
See the description for scroll.event. |
conditions |
[scroll.conditions] |
See the description for scroll.conditions. |
onBefore |
[scroll.onBefore] |
See the description for scroll.onBefore. |
onAfter |
[scroll.onAfter] |
See the description for scroll.onAfter. |
onEnd |
[scroll.onEnd] |
See the description for scroll.onEnd. |
String |
Any valid string for prev.button or prev.key. |
Number |
A number for prev.key. |
next
Click to hide the options for this object. |
Object |
A map of the configuration used for scrolling forward using the «next» button or key: button, key, items, fx, easing, duration, pauseOnHover, queue, event, conditions, onBefore, onAfter and onEnd.
This object is the same as the scroll object, except for button and key. What is not specified in this object, will be inherited from the scroll object. |
button |
null |
String |
A jQuery-selector for the HTML element that should scroll the carousel forward. |
jQuery-object |
A jQuery-object of the HTML element that should scroll the carousel forward. |
Function |
A function that returns any of the other valid values. |
key |
null |
Number |
The keyCode of the keyboard-key that should scroll the carousel forward. |
String |
Can be: "up", "down", "left" or "right". |
items |
[scroll.items] |
See the description for scroll.items. |
fx |
[scroll.fx] |
See the description for scroll.fx. |
easing |
[scroll.easing] |
See the description for scroll.easing. |
duration |
[scroll.duration] |
See the description for scroll.duration. |
String |
Enter "auto" to let the plugin calculate a speed for the transition instead of using a duration. This could be desirable when using the slideTo event.Note: The speed is calculated by deviding scroll.duration by scroll.items and multiplying it with the amount of items to scroll. |
pauseOnHover |
[scroll.pauseOnHover] |
See the description for scroll.pauseOnHover. |
queue |
[scroll.queue] |
See the description for scroll.queue. |
event |
[scroll.event] |
See the description for scroll.event. |
conditions |
[scroll.conditions] |
See the description for scroll.conditions. |
onBefore |
[scroll.onBefore] |
See the description for scroll.onBefore. |
onAfter |
[scroll.onAfter] |
See the description for scroll.onAfter. |
onEnd |
[scroll.onEnd] |
See the description for scroll.onEnd. |
String |
Any valid string for next.button or next.key. |
Number |
A number for next.key. |
pagination
Click to hide the options for this object. |
Object |
A map of the configuration used for scrolling via the «pagination» buttons/bullets or keys: container, keys, anchorBuilder, items, deviation, fx, easing, duration, pauseOnHover, queue, event, conditions, onBefore, onAfter and onEnd.
This object is the same as the scroll object, except for container, keys, anchorBuilder and deviation. What is not specified in this object, will be inherited from the scroll object. |
container |
null |
String |
A jQuery-selector for the HTML element that should contain the pagination-links. |
jQuery-object |
A jQuery-object of the HTML element that should contain the pagination-links. |
Function |
A function that returns any of the other valid values. |
keys |
false |
Boolean |
Determines whether the carousel can be controlled via the keyboard-key 1-9.
Note: any page after page 9 will not be accessible via the keyboard. |
anchorBuilder |
null |
Function |
Function to use for building the anchors of the pagination.
If null, the public method pageAnchorBuilder is used:
$.fn.carouFredSel.pageAnchorBuilder: function(nr, item) {
return '<a href="#'+nr+'"><span>'+nr+'</span></a>';
};
This function receives 1 parameter: |
nr // The page number. |
Boolean |
If false, instead of building the pagination, the elements allready available in the container will be used as anchors. |
items |
[items.visible] |
The number of items per page. |
deviation |
0 |
The number to deviate the selected bullet. |
fx |
[scroll.fx] |
См. описание scroll.fx. |
easing |
[scroll.easing] |
См. описание scroll.easing. |
duration |
[scroll.duration] |
См. описание scroll.duration. |
String |
Enter "auto" to let the plugin calculate a speed for the transition instead of using a duration.Note: The speed is calculated by deviding scroll.duration by scroll.items and multiplying it with the amount of items to scroll. |
pauseOnHover |
[scroll.pauseOnHover] |
См. описание scroll.pauseOnHover. |
queue |
[scroll.queue] |
См. описание scroll.queue. |
event |
[scroll.event] |
См. описание scroll.event. |
conditions |
[scroll.conditions] |
См. описание scroll.conditions. |
onBefore |
[scroll.onBefore] |
См. описание scroll.onBefore. |
onAfter |
[scroll.onAfter] |
См. описание scroll.onAfter. |
onEnd |
[scroll.onEnd] |
См. описание scroll.onEnd. |
String |
Any valid string for pagination.container. |
Boolean |
True or false for pagination.keys. |
swipe
Click to hide the options for this object. |
Object |
A map of the configuration used for scrolling via swiping (on touch-devices) or dragging (using a mouse): onTouch, onMouse, options, items, fx, easing, duration, pauseOnHover, queue, conditions, onBefore, onAfter and onEnd.
This object is the same as the scroll object, except for onTouch, onMouse and options. What is not specified in this object, will be inherited from the prev or next object.To enable this feature, you’ll need to include the jQuery.touchSwipe-plugin. |
onTouch |
false |
Boolean |
Determines whether the carousel should scroll via swiping gestures (on touch-devices only). |
onMouse |
false |
Boolean |
Determines whether the carousel should scroll via dragging (on non-touch-devices only). |
options |
null |
Object |
A map of the configuration used for the touchSwipe-plugin. |
items |
[scroll.items] |
See the description for scroll.items. |
fx |
[scroll.fx] |
See the description for scroll.fx. |
easing |
[scroll.easing] |
See the description for scroll.easing. |
duration |
[scroll.duration] |
See the description for scroll.duration. |
String |
Enter "auto" to let the plugin calculate a speed for the transition instead of using a duration. This could be desirable when using the slideTo event.Note: The speed is calculated by deviding scroll.duration by scroll.items and multiplying it with the amount of items to scroll. |
pauseOnHover |
[scroll.pauseOnHover] |
See the description for scroll.pauseOnHover. |
[scroll.queue] |
See the description for scroll.queue. |
conditions |
[scroll.conditions] |
See the description for scroll.conditions. |
onBefore |
[scroll.onBefore] |
See the description for scroll.onBefore. |
onAfter |
[scroll.onAfter] |
See the description for scroll.onAfter. |
onEnd |
[scroll.onEnd] |
See the description for scroll.onEnd. |
Boolean |
True or false for swipe.onTouch. |
Number |
A number for swipe.items. |
mousewheel
Click to hide the options for this object. |
Object |
A map of the configuration used for scrolling via the mousewheel: items, fx, easing, duration, pauseOnHover, queue, conditions, onBefore, onAfter and onEnd.
This object is the same as the scroll object. What is not specified in this object, will be inherited from the prev or next object.To enable this feature, you’ll need to include the jQuery.mousewheel-plugin. |
items |
[scroll.items] |
See the description for scroll.items. |
fx |
[scroll.fx] |
See the description for scroll.fx. |
easing |
[scroll.easing] |
See the description for scroll.easing. |
duration |
[scroll.duration] |
See the description for scroll.duration. |
String |
Enter "auto" to let the plugin calculate a speed for the transition instead of using a duration. This could be desirable when using the slideTo event.Note: The speed is calculated by deviding scroll.duration by scroll.items and multiplying it with the amount of items to scroll. |
pauseOnHover |
[scroll.pauseOnHover] |
See the description for scroll.pauseOnHover. |
queue |
[scroll.queue] |
See the description for scroll.queue. |
conditions |
[scroll.conditions] |
See the description for scroll.conditions. |
onBefore |
[scroll.onBefore] |
See the description for scroll.onBefore. |
onAfter |
[scroll.onAfter] |
See the description for scroll.onAfter. |
onEnd |
[scroll.onEnd] |
See the description for scroll.onEnd. |
Boolean |
True to copy all options from the scroll object. |
Number |
A number for mousewheel.items. |