(+612) 2531 5600
info@la-studioweb.com
Get direction
Google map
Sliders
These modular elements can be readily used and customized across pages and in different blocks.
Explore all of Stack’s modular elements
at the Element Index Page →
[stack_boxed_content padding=”boxed–lg” background=”bg–secondary”]
[/stack_boxed_content]
Basic Slider Markup
Sliders in Stack use the premium Flickity plugin and work by housing an unordered list .slides inside a div with class .slider
There are a number of data attribute options to customise the behaviour of the slider:
- data-arrows=”true || false” – enable navigation arrows
- data-paging=”true || false” – enable navigation dots
- data-autoplay=”true || false” – enable auto-paging of the slider
- data-timing=”NUM” – millisecond value before slider scrolls
[stack_slider image=”235,14,227,228″]
[stack_boxed_content padding=”boxed–lg” background=”bg–secondary”]
[/stack_boxed_content]
Adjust Slide Widths
You can adjust slide widths by using the Bootstrap grid column classes on the slide li elements.
[stack_slider paging=”true” column=”6″ image=”235,14,227,228″]
[stack_boxed_content padding=”boxed–lg” background=”bg–secondary”]
[/stack_boxed_content]
Slider Effects
Easily modify the behaviour of the slider by adding the following classes to the .slider element.
- .slider–ken-burns – adds subtle ‘Ken Burns’effect on slide image
[stack_slider image=”235,14,227,228″ custom_css_class=”slider–ken-burns”]