Слайдер Carousel FredSel. Документация
24 июня, 2017
Одна из самых крутых jquery-каруселей, которая умеет делать буквально всё. А чего не умеет, тому легко учится.
$(function () {
$(«.option-within .cell-name»).on(«click», function () {
$(this).parent().toggleClass(«option-inside-open»);
if ($(this).parent().hasClass(«option-inside-open»)) {
$(this).find(«i»).text(«скрыть»);
} else {
$(this).find(«i»).text(«открыть»);
}
});
});
Подключение более чем стандартное:
- Скачиваете скрипт с гитхаба.
- Подключаете на страницу после jquery.
- Инициализируете кодом
$('#carousel').carouFredSel();
Я не стану рассказывать об особенностях работы, потому что есть отличная библиотека с 72-мя примерами слайдеров. Смотрите, ищите, копируйте, совмещайте.
Этот пост — необходимость сохранить обширную документацию по функциям карусели. Сайт, содержащий её ранее, умер, но вебархив помог мне вытащить копию.
Настройка Carousel FredSel
Опция
По умолчанию
Тип
Описание
circular
true
Boolean
Determines whether the carousel should be circular.
infinite
true
Boolean
Determines whether the carousel should be infinite.
Note: It is possible to create a non-circular, infinite carousel, but it is not possible to create a circular, non-infinite carousel.
Note: It is possible to create a non-circular, infinite carousel, but it is not possible to create a circular, non-infinite carousel.
responsive
false
Boolean
Determines whether the carousel should be responsive.
If
If
true, the items will be resized to fill the carousel.direction
«left»
String
The direction to scroll the carousel, determines whether the carousel scrolls horizontal or vertical and -when the carousel scrolls automatically- in what direction.
Possible values:
Possible values:
"right", "left", "up" or "down".width
null
Number
The width of the carousel.
If
If
null, the width will be calculated (and set to "variable" if necessary, depending on the item-widths).String
Enter
"variable" to automatically resize the carousel when scrolling items with variable widths.String
Enter
"auto" to measure the widest item.String
Enter a percentage to automatically resize (and re-configurate) the carousel onWindowResize.
Note: Only applies on horizontal carousels.
For example:
Note: Only applies on horizontal carousels.
For example:
"100%".height
null
Number
The height of the carousel.
If
If
null, the height will be calculated (and set to "variable" if necessary, depending on the item-heights).String
Enter
"variable" to automatically resize the carousel when scrolling items with variable heights.String
Enter
"auto" to measure the highest item.String
Enter a percentage to automatically resize (and re-configurate) the carousel onWindowResize.
Note: Only applies on vertical carousels.
For example:
Note: Only applies on vertical carousels.
For example:
"100%".align
«center»
String
Whether and how to align the items inside a fixed width/height.
Possible values:
Possible values:
"center", "left", "right" or false.padding
null
Number
Padding around the carousel (top, right, bottom and left).
Array
Padding in an Array.
For example:
or
For example:
[10, 20, 30, 40] (top, right, bottom, left)or
[0, 50] (top/bottom, left/right).synchronise
null
String
Selector for the carousel to synchronise.
Array
Selector and options for the carousel to synchronise:
[string selector, boolean inheritOptions, boolean sameDirection, number deviation] For example:
[string selector, boolean inheritOptions, boolean sameDirection, number deviation] For example:
["#foo2", true, true, 0]Array
A collection of arrays.
cookie
false
Boolean
Determines whether the carousel should start at its last viewed position.
The cookie is stored until the browser is closed.
String
A specific name for the cookie to prevent multiple carousels from using the same cookie.
onCreate
null
Function
Function that will be called after the carousel has been created.
This function receives a map of all data:
data = {
'width', // The new width for the carousel.
'height', // The new height for the carousel.
'items' // A jQuery-object of the visible items.
};
items
Нажмите, чтобы открыть опции.
Object
A map of the configuration for the items:
visible, minimum, start, width, height and filter.Number
A number for
items.visible.String
Enter
"variable" for items.width, items.height and items.visible.visible
null
Number
The number of visible items.
If
If
null, the number will be calculated (and set to "variable" if necessary).String
Enter
(based on the available size).
"variable" to measure the number of visible items(based on the available size).
Object
A map for
min and max.String
A string consisting of three sections:
- base:
"odd","even"or""(an empty string, default). - adjustment:
"+"or"-". - amount:any number (1 by default)
"odd+2" will measure the number of items needed to fill the available size, decrease it to an odd number and increase it by two.
Function
A function that returns the number of visible items.
This function receives 1 parameter:
This function receives 1 parameter:
- visibleItems: the number of items that would fit the available size.
minimum
null
Number
The minimum number of items needed to create a carousel.
If
If
null, the number for items.visible is inherited and increased by 1.start
0
Number
The nth item to start the carousel.
Hint: This can also be a negative number.
Hint: This can also be a negative number.
String
Enter
"random" to let the plugin pick a randon item to start the carousel.String
A jQuery-selector of the item to start the carousel.
For example:
For example:
"#foo li:first".jQuery-object
A jQuery-object of the item to start the carousel.
For example:
For example:
$("#foo li:first").Boolean
If
For example: http://domain.com#startitem
true, the plugin will search for an item-anchor to start the carousel using the url-hashtag.For example: http://domain.com#startitem
Array
An array of the options above in the order they should be tested for a valid value.
width
null
Number
The width of the items.
If
If
null, the width will be measured (and set to "variable" if necessary).String
Enter
"variable" to create a carousel that supports variable item-widths.String
Enter a percentage to automatically resize the width of the items onWindowResize.
Note: Only applies on responsive, vertical carousels.
For example:
Note: Only applies on responsive, vertical carousels.
For example:
"50%".height
null
Number
The height of the items.
If
If
null, the height will be measured (and set to "variable" if necessary).String
Enter
"variable" to create a carousel that supports variable item-heights.String
Enter a percentage to automatically resize the height of the items onWindowResize.
Note: Only applies on responsive, horizontal carousels.
For example:
Note: Only applies on responsive, horizontal carousels.
For example:
"50%".filter
null
String
The selector elements should match to be considered an item.
If
If the carousel contains :hidden-elements, it is set to
Note: this option is not (yet) compatible with non-circular carousels.
If
null, all elements inside the carousel will be considered to be an item.If the carousel contains :hidden-elements, it is set to
":visible".Note: this option is not (yet) compatible with non-circular carousels.
scroll
Нажмите, чтобы открыть опции.
Object
A map of the configuration used for general scrolling:
items, fx, easing, duration, pauseOnHover, queue, event, conditions, onBefore, onAfter and onEnd.Number
A number for
scroll.items or -if greater than 50- for scroll.duration.String
A string for
scroll.easing.items
null
Number
The number of items to scroll.
If
If
null, the number of visible items is used.String
Enter
"page" to scroll to the first item of the previous/next «page».String
A string consisting of three sections:
- base:
"odd","even"or""(an empty string, default). - adjustment:
"+"or"-". - amount:any number (1 by default)
"odd+2" will decrease the number of visible items to an odd number and increase it by two.fx
«scroll»
String
Indicates which effect to use for the transition.
Possible values:
Possible values:
"none", "scroll", "directscroll", "fade", "crossfade", "cover", "cover-fade", "uncover" or "uncover-fade".easing
«swing»
String
Indicates which easing function to use for the transition. jQuery defaults:
"linear" and "swing", built in: "quadratic", "cubic" and "elastic".duration
500
Number
Determines the duration of the transition in milliseconds.
If less than
This is probably desirable when scrolling items with variable sizes.
If less than
10, the number is interpreted as a speed (pixels/millisecond).This is probably desirable when scrolling items with variable sizes.
pauseOnHover
false
Boolean
Determines whether the timeout between transitions should be paused «onMouseOver» (only applies when the carousel scrolls automatically).
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
Determines whether the scrolling should be queued if the carousel is currently being animated.
String
Enter
"first" to queue only the first scroll.String
Enter
"last" to queue only the last scroll (all previous queued scroll will be removed).Number
Enter a numeric value to specify the amount of items to scroll.
event
«click»
String
The event to trigger the prev-, next- and pagination-buttons/bullets.
conditions
null
Function
Function that tests whether the carousel should start scrolling.
If it doesn’t return
This function receives one parameter:
If it doesn’t return
true, the carousel will not scroll.This function receives one parameter:
direction // The direction of the transition.onBefore
null
Function
Function that will be called right before the carousel starts scrolling.
This function receives a map of all data:
This function receives a map of all data:
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
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:
This function receives one parameter:
direction // The direction of the transition.
auto
Нажмите, чтобы открыть опции.
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.
String
True or false for
auto.play.Number
A number for
auto.timeoutDuration.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
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.
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
.progressbarUpdater
Function
Function that will be called to update the progressbar.
This function receives one parameter:
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.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.pauseOnHover
[scroll.pauseOnHover]
See the description for
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
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.
Note: Only applies on responsive carousels.
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.onTimeoutStart
null
Function
Function that will be called when starting the pausing-timer.
This function receives 2 parameters:
This function receives 2 parameters:
- percentage: The percentage the
auto.timeoutDurationis 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
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
Functionality is the same as for the
onTimeoutStart-function.
prev
Нажмите, чтобы открыть опции.
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.
String
Any valid string for
prev.button or prev.key.Number
A number for
prev.key.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.
next
Нажмите, чтобы открыть опции.
Object
A map of the configuration used for scrolling forward using the «nxt» 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.
String
Any valid string for
next.button or next.key.Number
A number for
next.key.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.
pagination
Нажмите, чтобы открыть опции.
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.
String
Any valid string for
pagination.container.Boolean
True or false for
pagination.keys.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.
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
This function receives 1 parameter:
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]
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.
swipe
Нажмите, чтобы открыть опции.
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.
Boolean
True or false for
swipe.onTouch.Number
A number for
swipe.items.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
[items.visible]
The number of items per page.
deviation
0
The number to deviate the selected bullet.
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.
mousewheel
Нажмите, чтобы открыть опции.
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.
Boolean
True to copy all options from the
scroll object.Number
A number for
mousewheel.items.items
[items.visible]
The number of items per page.
deviation
0
The number to deviate the selected bullet.
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.Note: In all callback functions, this refers to the HTML-element of the carousel.
Except for the auto.progress.updater-callback function, where it refers to the HTML-element of auto.progress.bar; and the pagination.anchorBuilder-callback function, where it refers to the HTML-element of the current item.