13/05/13

Configuration - CarouFredSel
Check out the new carouFredSel WordPress Plugin from Dev7studios.

version 6.2.1

Configuration
The carouFredSel-plugin provides a lot of options for customizing your carousel. Luckily for you, all options are OPTIONAL... The default option values can be overridden by passing new values to the method or by redefining the default option values. The following options are provided by the plugin. Really sweet customized carousels can be created by using these options. Have a look at the configuration code examples page to see just how.

Please note: As of version 6.0.0, the o n B e f o r e, o n A f t e r and o n C r e a t e-callback functions receive only one parameter: a map of all data. Also some options and callback functions became deprecated.

Option
circular infinite

Default value
t r u e t r u e

Datatype
Boolean Boolean

Description
Determines whether the carousel should be circular. 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.

responsive

f a l s e

Boolean

Determines whether the carousel should be responsive. If t r u e, the items will be resized to fill the carousel.

direction

" l e f t "

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: " r i g h t ", " l e f t ", " u p " or " d o w n ".

width

n u l l

Number

The width of the carousel. If n u l l, the width will be calculated (and set to " v a r i a b l e " if necessary, depending on the item-widths).

String

Enter " v a r i a b l e " to automatically resize the carousel when scrolling items with variable widths.

caroufredsel.dev7studios.com/configuration.php

String

Enter " a u t o " to measure the widest item.

1/5

13/05/13
String String

Configuration - CarouFredSel
Enter " a u t o " to measure the widest item. Enter a percentage to automatically resize (and re-configurate) the carousel onWindowResize. Note: Only applies on horizontal carousels. For example: " 1 0 0 % ". height
n u l l

Number

The height of the carousel. If n u l l, the height will be calculated (and set to " v a r i a b l e " if necessary, depending on the item-heights).

String

Enter " v a r i a b l e " to automatically resize the carousel when scrolling items with variable heights.

String String

Enter " a u t o " to measure the highest item. Enter a percentage to automatically resize (and re-configurate) the carousel onWindowResize. Note: Only applies on vertical carousels. For example: " 1 0 0 % ".

align

" c e n t e r "

String

Whether and how to align the items inside a fixed width/height. Possible values: " c e n t e r ", " l e f t ", " r i g h t " or f a l s e.

padding

n u l l

Number Array

Padding around the carousel (top, right, bottom and left). Padding in an Array. For example: [ 1 0 ,2 0 ,3 0 ,4 0 ] (top, right, bottom, left) or [ 0 ,5 0 ] (top/bottom, left/right).

synchronise

n u l l

String Array

Selector for the carousel to synchronise. Selector and options for the carousel to synchronise: [string selector, boolean inheritOptions, boolean sameDirection, number deviation] For example: [ " # f o o 2 " ,t r u e ,t r u e ,0 ]

Array cookie
f a l s e

A collection of arrays. Determines whether the carousel should start at its last viewed position. The cookie is stored until the browser is closed.

Boolean

String

A specific name for the cookie to prevent multiple carousels from using the same cookie.

onCreate

n u l l

Function

Function that will be called after the carousel has been created. This function receives a map of all data:

1 d a t a={ 2 ' w i d t h ' , 3 ' h e i g h t ' , 4 ' i t e m s ' 5 } ;

/ /T h en e ww i d t hf o rt h ec a r o u s e l . / /T h en e wh e i g h tf o rt h ec a r o u s e l . / /Aj Q u e r y o b j e c to ft h ev i s i b l ei t e m s .

items
Click to show the options for this ob ject.

Object

A map of the configuration for the items: v i s i b l e, m i n i m u m, s t a r t, w i d t h,

h e i g h t and f i l t e r.

Number String scroll

Click to show the options for this ob ject.

A number for i t e m s . v i s i b l e. Enter " v a r i a b l e " for i t e m s . w i d t h, i t e m s . h e i g h t and i t e m s . v i s i b l e. A map of the configuration used for general scrolling: i t e m s, f x, e a s i n g,
d u r a t i o n, p a u s e O n H o v e r, q u e u e, e v e n t, c o n d i t i o n s, o n B e f o r e, o n A f t e r and o n E n d.

Object

Number String

A number for s c r o l l . i t e m s or -if greater than 50- for s c r o l l . d u r a t i o n. A string for s c r o l l . e a s i n g.

caroufredsel.dev7studios.com/configuration.php

2/5

13/05/13
auto
Click to show the options for this ob ject.

Configuration - CarouFredSel
Object A map of the configuration used for automatic scrolling: p l a y, b u t t o n,
t i m e o u t D u r a t i o n, d e l a y, p r o g r e s s, i t e m s, f x, e a s i n g, d u r a t i o n, p a u s e O n H o v e r, p a u s e O n E v e n t, p a u s e O n R e s i z e, q u e u e, e v e n t, c o n d i t i o n s, o n B e f o r e, o n A f t e r, o n E n d, o n T i m e o u t S t a r t, o n T i m e o u t E n d

and o n T i m e o u t P a u s e. This object is the same as the s c r o l l object, except for p l a y, b u t t o n,

t i m e o u t D u r a t i o n, d e l a y, p r o g r e s s, p a u s e O n E v e n t, p a u s e O n R e s i z e, o n T i m e o u t S t a r t, o n T i m e o u t E n d and o n T i m e o u t P a u s e. What is not specified in this object, will be inherited from

the s c r o l l object.

Boolean Number prev

Click to show the options for this ob ject.

True or false for a u t o . p l a y. A number for a u t o . t i m e o u t D u r a t i o n. A map of the configuration used for scrolling backwards using the "previous" button or key: b u t t o n, k e y, i t e m s, f x, e a s i n g, d u r a t i o n, p a u s e O n H o v e r,
q u e u e, e v e n t, c o n d i t i o n s, o n B e f o r e, o n A f t e r and o n E n d.

Object

This object is the same as the s c r o l l object, except for b u t t o n and

k e y. What is not specified in this object, will be inherited from the s c r o l l

object.

String Number next

Click to show the options for this ob ject.

Any valid string for p r e v . b u t t o n or p r e v . k e y. A number for p r e v . k e y. A map of the configuration used for scrolling forward using the "next" button or key:
b u t t o n, k e y, i t e m s, f x, e a s i n g, d u r a t i o n, p a u s e O n H o v e r, q u e u e, e v e n t, c o n d i t i o n s, o n B e f o r e, o n A f t e r and o n E n d.

Object

This object is the same as the s c r o l l object, except for b u t t o n and

k e y. What is not specified in this object, will be inherited from the s c r o l l

object.

String Number pagination

Click to show the options for this ob ject.

Any valid string for n e x t . b u t t o n or n e x t . k e y. A number for n e x t . k e y. A map of the configuration used for scrolling via the "pagination" buttons/bullets or keys: c o n t a i n e r, k e y s, a n c h o r B u i l d e r, i t e m s, d e v i a t i o n, f x, e a s i n g,
d u r a t i o n, p a u s e O n H o v e r, q u e u e, e v e n t, c o n d i t i o n s, o n B e f o r e, o n A f t e r and o n E n d.

Object

This object is the same as the s c r o l l object, except for c o n t a i n e r,

k e y s, a n c h o r B u i l d e r and d e v i a t i o n. What is not specified in this

object, will be inherited from the s c r o l l object.

String Boolean swipe

Click to show the options for this ob ject.

Any valid string for p a g i n a t i o n . c o n t a i n e r. True or false for p a g i n a t i o n . k e y s. A map of the configuration used for scrolling via swiping (on touch-devices) or dragging (using a mouse): o n T o u c h, o n M o u s e, o p t i o n s, i t e m s, f x,
e a s i n g, d u r a t i o n, p a u s e O n H o v e r, q u e u e, c o n d i t i o n s, o n B e f o r e, o n A f t e r and o n E n d.

Object

This object is the same as the s c r o l l object, except for o n T o u c h,

o n M o u s e and o p t i o n s. What is not specified in this object, will be

inherited from the p r e v or n e x t object. To enable this feature, you'll need to include the jQuery.touchSwipe-plugin.

caroufredsel.dev7studios.com/configuration.php

3/5

13/05/13
Boolean Number mousewheel
Click to show the options for this ob ject.

Configuration - CarouFredSel
True or false for s w i p e . o n T o u c h. A number for s w i p e . i t e m s. A map of the configuration used for scrolling via the mousewheel: i t e m s, f x,
e a s i n g, d u r a t i o n, p a u s e O n H o v e r, q u e u e, c o n d i t i o n s, o n B e f o r e, o n A f t e r and o n E n d.

Object

This object is the same as the s c r o l l object. What is not specified in this object, will be inherited from the p r e v or n e x t object. To enable this feature, you'll need to include the jQuery.mousewheel-plugin.

Boolean Number

True to copy all options from the s c r o l l object. A number for m o u s e w h e e l . i t e m s.

Note: In all callback functions, t h i s refers to the HTML-element of the carousel. Except for the a u t o . p r o g r e s s . u p d a t e r-callback function, where it refers to the HTML-element of a u t o . p r o g r e s s . b a r; and the p a g i n a t i o n . a n c h o r B u i l d e r-callback function, where it refers to the HTML-element of the current item. Have a look at the configuration code examples page for more detailed information on how to use the configuration options. Working examples can be found on these examples pages.

Options for the plugin

After the configuration-object, a second object can be passed to the method containing options for the plugin itself.

Option
debug transition

Default value
f a l s e f a l s e

Datatype
Boolean Boolean

Description
Determines whether to log debugging information to the console. Determines whether to use CSS3 transitions instead of javascript animations. To enable this feature, you'll need to include the jQuery.transit-plugin.

onWindowResize

t h r o t t l e

String

Enter " t h r o t t l e " to use the throttle-plugin to rate-limit the carousel updating onWindowResize. Or " d e b o u n c e " to use the debounce-plugin. To enable this feature, you'll need to include the jQuery.throttle-debounceplugin.

wrapper
Click to show the options for this ob ject.

Object

A map of the configuration for the wrapper: e l e m e n t and c l a s s n a m e.

String events
Click to show the options for this ob ject.

Enter " p a r e n t " to use the parent element as the carousel-wrapper. A map of the configuration for the events: p r e f i x and n a m e s p a c e.

Object

classnames
Click to show the options for this ob ject.

Object

A map of the configuration for the classnames: s e l e c t e d, h i d d e n and

d i s a b l e d.

Override by passing new values to the method

caroufredsel.dev7studios.com/configuration.php 4/5

13/05/13
0 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0 1 1 1 2 1 3 1 4

Configuration - CarouFredSel
< s c r i p tt y p e = " t e x t / j a v a s c r i p t "s r c = " j q u e r y . j s " > < / s c r i p t > < s c r i p tt y p e = " t e x t / j a v a s c r i p t "s r c = " j q u e r y . c a r o u F r e d S e l . j s " > < / s c r i p t > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " > $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ){ $ ( " # f o o 1 " ) . c a r o u F r e d S e l ( ) ; $ ( " # f o o 2 " ) . c a r o u F r e d S e l ( ) ; $ ( " # f o o 3 " ) . c a r o u F r e d S e l ( { i t e m s :3 , d i r e c t i o n :" u p " } ,{ d e b u g :t r u e } ) ; } ) ; < / s c r i p t >

Note: These changes will only apply to the # f o o 3 carousel.

Override by redefining the default option values

0 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0 1 1 < s c r i p tt y p e = " t e x t / j a v a s c r i p t "s r c = " j q u e r y . j s " > < / s c r i p t > < s c r i p tt y p e = " t e x t / j a v a s c r i p t "s r c = " j q u e r y . c a r o u F r e d S e l . j s " > < / s c r i p t > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " > $ . f n . c a r o u F r e d S e l . d e f a u l t s . i t e m s . v i s i b l e =3 ; $ . f n . c a r o u F r e d S e l . d e f a u l t s . d i r e c t i o n =" u p " ; $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ){ $ ( " # f o o 1 " ) . c a r o u F r e d S e l ( ) ; $ ( " # f o o 2 " ) . c a r o u F r e d S e l ( ) ; $ ( " # f o o 3 " ) . c a r o u F r e d S e l ( ) ; } ) ; < / s c r i p t >

Note: These changes will apply to all the carousels on the page.

Need some help?

When you're in desperate need of help, you might want to visit the examples-pages or have a peak at the tips & tricks and maybe the known issues. Or -if everything else fails- try the support forum.

Feedback
Any kind of feedback is more than welcome in this forum-topic. Thank you!

Jquery Carousel

Vertical Carousel

Jquery Slider

Jquery SlideShow
--- 2013 Dev7studios

Home - Examples - Installation - Configuration - Custom events - Tips & tricks - Known issues - Support forum - Changelog - Contact

caroufredsel.dev7studios.com/configuration.php

5/5