Configuration Robot
Not sure how to make the best use of all the options and settings the carouFredSel-plugin offers?
Don't worry, I'm the incredible configuration robot and I'm programmed to make your life easy!
Simply answer my questions and we'll figure it out together...
And always remember: all options are OPTIONAL. So if you don't know the answer, simply skip to the next question!
Okay then, lets start!
Do you want to show the intermediate questions?
| Yes, show the intermediate questions. |
What HTML element(s) do you want to turn into a carousel?
Use a valid jQuery-selector to select the HTML element(s). For example: #foo or .foo ul.
$(" ").carouFredSel(); |
Uh oh, that does not look like a valid jQuery-selector, more info about selectors here.
Do you want a horizontal or a vertical carousel?
| Horizontal | |
| Vertical |
Does your carousel need to be circular?
Once a circular carousel reaches its last item, it will simply continue scrolling as if there is no last item...
| Yes please! |
How about a infinite carousel?
Once a infinite carousel reaches its last item, it will rewind and start all over again.
| Yes please! |
The width of the carousel should be...
| I don't know (let the plugin figure it out). | |
| A fixed or fluid size. | |
| Variable (carousel resizes to fit the visible item(s)). | |
| The width of the widest item. |
Specify the desired width for the carousel.
width: |
; |
Hold on, that's not a number...
The height of the carousel should be...
| I don't know (let the plugin figure it out). | |
| A fixed or fluid size. | |
| Variable (carousel resizes to fit the visible item(s)). | |
| The height of the highest item. |
Specify the desired height for the carousel.
height: |
; |
Hold on, that's not a number...
You've specified a fixed size, do you want to align the visible items?
If not, the number of items visible may vary from the specified visible items, depending on the carousel size.
| Yes, center the items. | |
| Yes, align the items to the left/top. | |
| Yes, align the items to the right/bottom. | |
| No, don't align the items. |
Does your carousel need some padding?
Padding can be used to create whitespace around the visible items.
| Yes, I want to specify the padding. |
Specify the desired padding for the carousel.
paddingTop: |
; // in pixels |
paddingRight: |
; // in pixels |
paddingBottom: |
; // in pixels |
paddingLeft: |
; // in pixels |
Hold on, that's not a number...
About the items.
How many items should be visible inside the carousel?
| I don't know (let the plugin figure it out). | |
items.visible:; |
|
| A variable amount (automatically calculated by the plugin). |
What is the minimum number of items?
If there are less items available, the carousel will not be created.
| One item more than visible. | ||
items.minimum:; |
||
At what item should the carousel start?
items.start:; |
||
| At a random position. | ||
Do all the items in your carousel have the same width?
| I don't know (let the plugin figure it out). | |
| Yes, I want to specify a fixed width for the items. | |
| No, the items have variable widths. |
Specify the desired width for the items.
items.width: |
; |
Hold on, that's not a number...
Do all the items in your carousel have the same height?
| I don't know (let the plugin figure it out). | |
| Yes, I want to specify a fixed height for the items. | |
| No, the items have variable heights. |
Specify the desired height for the items.
items.height: |
; |
Hold on, that's not a number...
General scrolling options.
How do you want your carousel to be scrolled?
| Scroll the carousel automatically. | |
| By pressing a previous button and/or key. | |
| By pressing a next button and/or key. | |
| By pressing pagination buttons and/or keys. | |
| By using the mousewheel (requires the jQuery Mouse Wheel plugin). | |
| By using touch-gestures (requires the jQuery Touchwipe plugin). |
How many items should be scrolled at a time?
| The same as visible. | |
scroll.items:; |
What effect would you like use for the transition?
scroll.fx:; |
What easing function do you want to use for the transition?
| Basic + build-in transitions | ||
| Easing plugin transitions | (only available when you include the jquery.easing plugin) |
How long would you like for the transition to run?
If the value is less then 10, the plugin will calculate a speed for the transition (the value represents the number of pixels scrolled per millisecond). This might be desirable when scrolling items with variable sizes.
| I don't know (let the plugin figure it out). | ||||
scroll.duration: |
; |
(milliseconds) | ||
Hold on, that's not a number...
Do you want the timeout between transitions to be paused when the cursor hovers over it?
| No, do not pause the timeout. | |
| Yes, pause the timeout when the cursor hovers over it. |
Does your carousel need callback-functions?
With these callback-functions you can make stuff happen right before or after the carousel scrolls, or when a non-circular carousel reaches its end.
| Yes, I want to specify an "onBefore" function. | |
| Yes, I want to specify an "onAfter" function. | |
Yes, I want to specify an "onEnd" function. |
Specify an "onBefore" function
scroll.onBefore: function(oldItems, newItems, newSizes, duration) { |
} |
Specify an "onAfter" function
scroll.onAfter: function(oldItems, newItems, newSizes) { |
} |
Specify an "onEnd" function
scroll.onEnd: function() { |
} |
Should the carousel always scroll, or are there conditions to be met?
With the conditions callback-functions you can test whether the carousel should scroll.
| There are conditions to be met, I want to specify a "conditions" function. |
Specify a "conditions" function
scroll.conditions: function() { |
} |
Uhmmm, doesn't this function need to "return" a value?
Automatic scrolling options.
In what direction should your carousel scroll?
| From right to left. | |
| From left to right. |
| From bottom to top. | |
| From top to bottom. |
How long do you want the carousel to wait before it scrolls again?
Leave this field empty to let the plugin figure out how long the carousel should be paused.
By default it will wait six times the duration of the transition.
auto.pauseDuration: |
; |
(milliseconds) |
Hold on, that's not a number...
Should the carousel wait for an additional delay before it starts scrolling the first time?
Hint: This can also be a negative number.
auto.delay: |
; |
(milliseconds) |
Hold on, that's not a number...
Does your carousel need callback-functions for when it's pausing?
With these callback-functions you can make stuff happen when the carousel starts, stops or pauses the timeout between transitions.
| Yes, I want to specify an "onPauseStart" function. | |
| Yes, I want to specify an "onPauseEnd" function. | |
| Yes, I want to specify an "onPausePause" function. |
Specify an "onPauseStart" function
auto.onPauseStart: function(percentage, duration) { |
} |
Specify an "onPauseEnd" function
auto.onPauseEnd: function(percentage, duration) { |
} |
Specify an "onPausePause" function
auto.onPausePause: function(percentage, duration) { |
} |
What of the following options do you want to specify for scrolling automatically?
All options you do not specify will be inherited from the options for general scrolling.
| The number of items to scroll. | |
| The effect to use for the transition. | |
| The duration of the transition. | |
The easing function for the transition. |
|
The function to be executed before scrolling. |
|
The function to be executed after scrolling. |
|
The function to be executed when the carousel reaches its start/end. |
|
The function to test whether the carousel should scroll. |
How many items should be scrolled at a time (when scrolling automatically)?
auto.items:; |
What effect would you like use for the transition (when scrolling automatically)?
auto.fx:; |
What easing function do you want to use for the transition (when scrolling automatically)?
| Basic + build-in transitions | ||
| Easing plugin transitions | (only available when you include the jquery.easing plugin) |
How long would you like for the transition to run (when scrolling automatically)?
If the value is less then 10, the plugin will calculate a speed for the transition (the value represents the number of pixels scrolled per millisecond). This might be desirable when scrolling items with variable sizes.
auto.duration: |
; |
(milliseconds) |
Hold on, that's not a number...
Specify an "onBefore" function (to be executed before scrolling automatically)
auto.onBefore: function(oldItems, newItems, newSizes, duration) { |
} |
Specify an "onAfter" function (to be executed after scrolling automatically)
auto.onAfter: function(oldItems, newItems, newSizes) { |
} |
Specify an "onEnd" function (to be executed after scrolling automatically)
auto.onEnd: function() { |
} |
Specify a "conditions" function (to be executed before scrolling automatically)
auto.conditions: function() { |
} |
Uhmmm, doesn't this function need to "return" a value?
"Previous" button and/or -key scrolling options.
What button can the user press to make the carousel scroll backward?
Use a valid jQuery-selector to select the HTML element(s). For example: #prev_btn or #foo > a.prev.
Leave this field empty if you do not want the user to scroll the carousel backward by pressing a button.
$(" |
"); |
Uh oh, that does not look like a valid jQuery-selector, more info about selectors here.
What keyboard key can the user press to make the carousel scroll backward?
Place your cursor in the field below and press the desired key on your keyboard.
Leave this field empty if you do not want the user to scroll the carousel backward by pressing a key.
key: |
; |
What of the following options do you want to specify for scrolling backward?
All options you do not specify will be inherited from the options for general scrolling.
| The number of items to scroll. | |
| The effect to use for the transition. | |
| The duration of the transition. | |
The easing function for the transition. |
|
Whether the carousel should pause on hover over the "previous" button. |
|
The function to be executed before scrolling. |
|
The function to be executed after scrolling. |
|
The function to be executed when the carousel reaches its start/end. |
|
The function to test whether the carousel should scroll. |
How many items should be scrolled at a time (when scrolling backward)?
prev.items:; |
What effect would you like use for the transition (when scrolling backward)?
prev.fx:; |
What easing function do you want to use for the transition (when scrolling backward)?
| Basic + build-in transitions | ||
| Easing plugin transitions | (only available when you include the jquery.easing plugin) |
How long would you like for the transition to run (when scrolling backward)?
If the value is less then 10, the plugin will calculate a speed for the transition (the value represents the number of pixels scrolled per millisecond). This might be desirable when scrolling items with variable sizes.
| Calculate a speed for the transition in stead of using a duration. | ||||
prev.duration: |
; |
(milliseconds) | ||
Hold on, that's not a number...
Specify an "onBefore" function (to be executed before scrolling backward)
prev.onBefore: function(oldItems, newItems, newSizes, duration) { |
} |
Specify an "onAfter" function (to be executed after scrolling backward)
prev.onAfter: function(oldItems, newItems, newSizes) { |
} |
Specify an "onEnd" function (to be executed after scrolling backward)
prev.onEnd: function() { |
} |
Specify a "conditions" function (to be executed before scrolling backward)
prev.conditions: function() { |
} |
Uhmmm, doesn't this function need to "return" a value?
Do you want the timeout between transitions to be paused when the cursor hovers over the "previous" button?
| No, do not pause the timeout. | |
| Yes, pause the timeout when the cursor hovers over the "previous" button. |
"Next" button and/or -key scrolling options.
What button can the user press to make the carousel scroll forward?
Use a valid jQuery-selector to select the HTML element(s). For example: #next_btn or #foo > a.next.
Leave this field empty if you do not want the user to scroll the carousel forward by pressing a button.
$(" |
"); |
Uh oh, that does not look like a valid jQuery-selector, more info about selectors here.
What keyboard key can the user press to make the carousel scroll forward?
Place your cursor in the field below and press the desired key on your keyboard.
Leave this field empty if you do not want the user to scroll the carousel forward by pressing a key.
key: |
; |
What of the following options do you want to specify for scrolling forward?
All options you do not specify will be inherited from the options for general scrolling.
| The number of items to scroll. | |
| The effect to use for the transition. | |
| The duration of the transition. | |
The easing function for the transition. |
|
Whether the carousel should pause on hover over the "next" button. |
|
The function to be executed before scrolling. |
|
The function to be executed after scrolling. |
|
The function to be executed when the carousel reaches its start/end. |
|
The function to test whether the carousel should scroll. |
How many items should be scrolled at a time (when scrolling forward)?
next.items:; |
What effect would you like use for the transition (when scrolling forward)?
next.fx:; |
What easing function do you want to use for the transition (when scrolling forward)?
| Basic + build-in transitions | ||
| Easing plugin transitions | (only available when you include the jquery.easing plugin) |
How long would you like for the transition to run (when scrolling forward)?
If the value is less then 10, the plugin will calculate a speed for the transition (the value represents the number of pixels scrolled per millisecond). This might be desirable when scrolling items with variable sizes.
| Calculate a speed for the transition in stead of using a duration. | ||||
next.duration: |
; |
(milliseconds) | ||
Hold on, that's not a number...
Specify an "onBefore" function (to be executed before scrolling forward)
next.onBefore: function(oldItems, newItems, newSizes, duration) { |
} |
Specify an "onAfter" function (to be executed after scrolling forward)
next.onAfter: function(oldItems, newItems, newSizes) { |
} |
Specify an "onEnd" function (to be executed after scrolling forward)
next.onEnd: function() { |
} |
Specify a "conditions" function (to be executed before scrolling forward)
next.conditions: function() { |
} |
Uhmmm, doesn't this function need to "return" a value?
Do you want the timeout between transitions to be paused when the cursor hovers over the "next" button?
| No, do not pause the timeout. | |
| Yes, pause the timeout when the cursor hovers over the "next" button. |
Pagination buttons and/or -keys scrolling options.
What HTML element should be used as a container for the pagination buttons?
Use a valid jQuery-selector to select the HTML element(s). For example: #pager_container or #foo > div.pagination.
Leave this field empty if you do not want the pagination buttons to be created.
$(" |
"); |
Uh oh, that does not look like a valid jQuery-selector, more info about selectors here.
Do you want to customize the way the pagination buttons are put together?
Not sure how to put together the pagination buttons? Have a look at this tip/trick.
Leave this field empty to use the default pagination setup.
function anchorBuilder( nr ) { |
} |
Uhmmm, doesn't this function need to "return" a value?
Do you want to enable the user to control the pagination by pressing the numberical keyboard keys?
| No, do not enable pressing the numberical keyboard keys. | |
| es, please do enable pressing the numberical keyboard keys. |
What of the following options do you want to specify for scrolling via the pagination?
All options you do not specify will be inherited from the options for general scrolling.
| The number of items to scroll. | |
| The effect to use for the transition. | |
| The duration of the transition. | |
The easing function for the transition. |
|
Whether the carousel should pause on hover over the pagination buttons. |
|
The function to be executed before scrolling. |
|
The function to be executed after scrolling. |
|
The function to be executed when the carousel reaches its start/end. |
|
The function to test whether the carousel should scroll. |
How many items should be scrolled at a time (when scrolling via the pagination)?
pagination.items:; |
What effect would you like use for the transition (when scrolling via the pagination)?
pagination.fx:; |
What easing function do you want to use for the transition (when scrolling via the pagination)?
| Basic + build-in transitions | ||
| Easing plugin transitions | (only available when you include the jquery.easing plugin) |
How long would you like for the transition to run (when scrolling via the pagination)?
If the value is less then 10, the plugin will calculate a speed for the transition (the value represents the number of pixels scrolled per millisecond). This might be desirable when scrolling items with variable sizes.
| Calculate a speed for the transition in stead of using a duration. | ||||
pagination.duration: |
; |
(milliseconds) | ||
Hold on, that's not a number...
Specify an "onBefore" function (to be executed before scrolling via the pagination)
pagination.onBefore: function(oldItems, newItems, newSizes, duration) { |
} |
Specify an "onAfter" function (to be executed after scrolling via the pagination)
pagination.onAfter: function(oldItems, newItems, newSizes) { |
} |
Specify an "onEnd" function (to be executed after scrolling via the pagination)
pagination.onEnd: function() { |
} |
Specify a "conditions" function (to be executed before scrolling via the pagination)
pagination.conditions: function() { |
} |
Uhmmm, doesn't this function need to "return" a value?
Do you want the timeout between transitions to be paused when the cursor hovers over the pagination buttons?
| No, do not pause the timeout. | |
| Yes, pause the timeout when the cursor hovers over the pagination buttons. |
Your JavaScript:
/* Answer the questions above please... */
