JavaScript API - Properties

Accordion Slider can be customized using several properties which are described below. These properties must be passed to the accordion when the accordion is instantiated.

Example:

$('#my-accordion').accordionSlider({
    width: 960, 
    height: 400,
    responsiveMode: 'custom',
    visiblePanels: 7,
    startPanel: 3,
    closePanelsOnMouseOut: false,
    shadow: false,
    panelDistance: 10,
    autoplay: false,
    mouseWheel: false
});

width

Sets the width of the accordion. Can be set to a fixed value, like 900 (indicating 900 pixels), or to a percentage value, like '100%'. It's important to note that percentage values need to be specified inside quotes. For fixed values, the quotes are not necessary. Also, please note that, in order to make the accordion responsive, it's not necessary to use percentage values. More about this in the description of the 'responsive' property.

Default value: 800

height

Sets the height of the accordion. The same rules available for the 'width' property also apply for the 'height' property.

Default value: 400

responsive

Makes the accordion responsive. The accordion can be responsive even if the 'width' and/or 'height' properties are set to fixed values. In this situation, 'width' and 'height' will act as the maximum width and height of the accordion.

Default value: true

responsiveMode

Sets the responsive mode of the accordion. Possible values are 'auto' and 'custom'. 'auto' resizes the accordion and all of its elements (e.g., layers, videos) automatically, while 'custom' only resizes the accordion container and panels, and you are given flexibility over the way inner elements (e.g., layers, videos) will respond to smaller sizes. For example, you could use CSS media queries to define different text sizes or to hide certain elements when the accordion becomes smaller, ensuring that all content remains readable without having to zoom in.

It's important to note that, if 'auto' responsiveness is used, the 'width' and 'height' need to be set to fixed values, so that the accordion can calculate correctly how much it needs to scale.

Default value: 'auto'

aspectRatio

Sets the aspect ratio of the accordion. The accordion will set its height depending on what value its width has, so that this ratio is maintained. For this reason, the set 'height' might be overridden.

This property can be used only when 'responsiveMode' is set to 'custom'. When it's set to 'auto', the 'aspectRatio' needs to remain -1.

Default value: -1 (determined by the ratio of the set 'width' and 'height')

orientation

Sets the orientation of the panels. Possible values are 'horizontal' and 'vertical'.

Default value: 'horizontal'

startPanel

Indicates which panel will be opened when the accordion loads (0 for the first panel, 1 for the second panel, etc.). If set to -1, no panel will be opened.

Default value: -1

openedPanelSize

Sets the size (width if the accordion's orientation is horizontal; height if the accordion's orientation is vertical) of the opened panel. Possible values are: 'max', which will open the panel to its maximum size, so that all the inner content is visible, a percentage value, like '50%', which indicates the percentage of the total size (width or height, depending on the orientation) of the accordion, or a fixed value.

Default value: 'max'

maxOpenedPanelSize

Sets the maximum allowed size of the opened panel. This should be used when the 'openedPanelSize' is set to 'max', because sometimes the maximum size of the panel might be too big and we want to set a limit. The property can be set to a percentage (of the total size of the accordion) or to a fixed value.

Default value: '80%'

openPanelOn

If set to 'hover', the panels will be opened by moving the mouse pointer over them; if set to 'click', the panels will only open when clicked.

Default value: 'hover'

closePanelsOnMouseOut

Determines whether the opened panel closes or remains open when the mouse pointer is moved away.

Default value: true

mouseDelay

Sets the delay in milliseconds between the movement of the mouse pointer and the opening of the panel. Setting a delay ensures that panels are not opened if the mouse pointer only moves over them without an intent to open the panel.

Default value: 200

panelDistance

Sets the distance between consecutive panels. Can be set to a percentage or fixed value.

Default value: 0

openPanelDuration

Determines the duration in milliseconds for the opening of a panel.

Default value: 700

closePanelDuration

Determines the duration in milliseconds for the closing of a panel.

Default value: 700

pageScrollDuration

Indicates the duration of the page scroll.

Default value: 500

pageScrollEasing

Indicates the easing type of the page scroll. Setting a custom value requires the use of a jQuery easing plugin.

Default value: 500

breakpoints

Sets specific breakpoints which allow changing the look and behavior of the accordion (decreasing the number of panels visible per page, shifting the orientation of the panels, etc.) when the page resizes.

Example:

$('#my-accordion').accordionSlider({
    width: 960, 
    height: 400,
    ...
    breakpoints: {
        960: {visiblePanels: 5},
        800: {visiblePanels: 3, orientation: 'vertical', width: 600, height: 500},
        650: {visiblePanels: 4},
        500: {visiblePanels: 3, orientation: 'vertical', aspectRatio: 1.2}
    }
});

As you can see, the 'breakpoints' property is assigned an object which contains certain browser window widths and the accordion properties that are applied to those specific widths. This is very similar to CSS media queries. However, please note that these custom properties will not be inherited between different breakpoints. The slider's properties will reset to the original values before applying a new set of properties, so if you want a certain property value to persist, you need to set it for each breakpoint.

visiblePanels

Indicates the number of panels visible per page. If set to -1, all the panels will be displayed on one page.

Default value: -1

startPage

Indicates which page will be opened when the accordion loads, if the panels are displayed on more than one page.

Default value: 0

shadow

Indicates if the panels will have a drop shadow effect.

Default value: true

panelOverlap

Indicates if the panels will be overlapped. If set to false, the panels will have their width or height set so that they are next to each other, but not overlapped.

Default value: true

autoplay

Indicates if the autoplay will be enabled.

Default value: true

autoplayDelay

Sets the delay, in milliseconds, of the autoplay cycle.

Default value: 5000

autoplayDirection

Sets the direction in which the panels will be opened. Can be set to 'normal' (ascending order) or 'backwards' (descending order).

Default value: 'normal'

autoplayOnHover

Indicates if the autoplay will be paused when the accordion is hovered.

Default value: 'pause'

mouseWheel

Indicates if the accordion will respond to mouse wheel input.

Default value: true

mouseWheelSensitivity

Sets how sensitive the accordion will be to mouse wheel input. Lower values indicate stronger sensitivity.

Default value: 50

mouseWheelTarget

Sets what elements will be targeted by the mouse wheel input. Can be set to 'panel' or 'page'. Setting it to 'panel' will indicate that the panels will be scrolled, while setting it to 'page' indicate that the pages will be scrolled.

Default value: 'panel'

keyboard

Indicates if the accordion will respond to keyboard input.

Default value: true

keyboardOnlyOnFocus

Indicates if the accordion will respond to keyboard input only if the accordion has focus.

Default value: false

swapBackgroundDuration

Sets the duration, in milliseconds, of the transition effect.

Default value: 700

fadeOutBackground

Indicates if the main image background will be faded out when the opened/alternative background fades in.

Default value: false

touchSwipe

Indicates if the touch swipe functionality will be enabled.

Default value: true

touchSwipeThreshold

Sets how many pixels the distance of the swipe gesture needs to be in order to trigger a page change.

Default value: 50

openPanelVideoAction

Sets what the video will do when the panel is opened. Can be set to 'playVideo' or 'none'.

Default value: 'playVideo'

closePanelVideoAction

Sets what the video will do when the panel is closed. Can be set to 'pauseVideo' or 'stopVideo.'

Default value: 'pauseVideo'

playVideoAction

Sets what the accordion will do when a video starts playing. Can be set to 'stopAutoplay' or 'none'.

Default value: 'stopAutoplay'

pauseVideoAction

Sets what the accordion will do when a video is paused. Can be set to 'startAutoplay' or 'none'.

Default value: 'none'

endVideoAction

Sets what the accordion will do when a video ends. Can be set to 'startAutoplay', 'nextPanel', 'replayVideo' or 'none'.

Default value: 'none'

XMLSource

Sets the XML source for the accordion. Can be set to a path to an XML file or to an XML string.

JSONSource

Sets the JSON source for the accordion. Can be set to a path to a JSON file or to a JSON string.

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk