Slider
Create a list of items to use as a responsive carousel slider
The slider is a responsive display of elements that can be scrolled through using the mouse or touch gestures.
Usage
To apply the Slider component, add the data-f-slider
attribute to a container element around a .f-slider-container
element. Add a list of items and assign the .f-slider
class to the list. Use the .f-width-*
and .f-grid-width-*
classes to determine how many elements are visible at once.
Example
Different Widths
With Drag Handle
Drag Handle Centered
Fancy!
Markup
<div data-f-slider>
<div class="f-slider-container">
<ul class="f-slider f-grid-width-medium-1-4">
<li>...</li>
...
</ul>
</div>
</div>
Navigation
The slider itself can be scrolled with click and drag of the mouse or swiping on touch devices. It is a good idea to also add a clickable slidenav navigation. The slidenav adds arrows buttons that appear when you hover the slider.
Example
<div class="f-slidenav-position" data-f-slider>
<button class="f-slidenav f-slidenav-contrast f-slidenav-previous" data-f-slider-item="previous"><i class="material-icons">chevron_left</i></button>
<div class="f-slider-container">
<ul class="f-slider f-grid-width-medium-1-4">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
<button class="f-slidenav f-slidenav-contrast f-slidenav-next" data-f-slider-item="next"><i class="material-icons">chevron_right</i></button>
</div>
Center Mode
By default, elements of the slider always align to the left edge of the slider container. If you want to center the elements instead, set the center
attribute to true
.
Note The center list element always has the class .f-active
added. You can make use of that if you want to highlight the center element.
Example
Center only if screen less than 800px: data-f-slider="{center:true,centerLimit:800}"
Markup
<div data-f-slider="{center:true}">
<div class="f-slider-container">
<ul class="f-slider f-grid-width-medium-1-4">
<li>...</li>
...
</ul>
</div>
</div>
Disable Infinite Scrolling
By default, the slider loops through all items. To disable that behaviour, set the infinite
parameter to false
. This works both with center mode enabled and disabled.
Example
Markup
<div data-f-slider="{infinite: false}">
<div class="f-slider-container">
<ul class="f-slider f-grid-width-medium-1-4">
<li>...</li>
...
</ul>
</div>
</div>
Item gutter
If you want some spacing between your elements, add the .f-grid
class to the slider container. The elements will then be spaced according to the grid gutter.
Note You can use the modifiers f-grid-medium
and f-grid-small
to change the gutter.
Example
Item width
To set the widths of your elements, use the width classes from the FatKit grid. Either use the f-grid-width-*
classes on the slider container or use individual widths per list item using the f-width-*
classes.
Example: Individual widths
Markup
<div data-f-slider>
<div class="f-slider-container">
<ul class="f-slider">
<li class="f-width-1-3">...</li>
<li class="f-width-1-5">...</li>
<li class="f-width-2-5">...</li>
...
</ul>
</div>
</div>
Responsive behaviour
To adapt to different viewports, you can use the responsive grid classes. In the following example, the slider displays four items on large viewports, three on medium and just one item on small ones.
Example: Responsive widths (with autoplay)
Markup
<div data-f-slider="{autoplay:true}">
<div class="f-slider-container">
<ul class="f-slider f-grid-width-medium-1-3 f-grid-width-large-1-4">
<li>...</li>
...
</ul>
</div>
</div>
Fullscreen mode
The slider includes a fullscreen mode where each slide stretches to 100% the height of the viewport.
Markup
<div data-f-slider>
<div class="f-slider-container">
<ul class="f-slider f-slider-fullscreen">
<li>...</li>
...
</ul>
</div>
</div>
JavaScript options
Option | Possible value | Default | Description |
---|---|---|---|
activecls |
string | f-active | Class added on active item in center mode |
autoplay |
false | boolean | Defines whether or not the slider items should switch automatically |
autoplayInterval |
integer | 7000 | Defines the timespan between switching slider items |
center |
boolean | false | Center items mode |
centerLimit |
integer | false | Center items until given screen width |
clickHold |
boolean | false | Clicking and holding on next and previous will continuously slide |
dotnav |
boolean | false | Automatically create a dotnav |
fancy |
boolean | false | Create a slider with a difference! |
infinite |
boolean | true | Infinite scrolling |
mousewheel |
boolean | false | Mousewheel scrolls through the slider |
pauseOnHover |
boolean | true | Pause autoplay when hovering a slider |
perPage |
integer | false | If using dotnav set this for more accurate dots |
threshold |
boolean | true | Mouse movement threshold in pixel until trigger element dragging |
draghandle | boolean | false | optionally adds a drag handle under the slider |
nextcls | string | f-next | class on item after the current active item, if fancy is enabled |
prevcls | string | f-previous | class on item before the active item, if fancy is enabled |
Init element manually
let slider = FatKit.slider(element, { /* options */ });
Events
Name | Parameter | Description |
---|---|---|
focusitem.f.slider |
event, index, item | On item focus |