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!

  • Test Panel

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ullam sapiente laboriosam tempore labore, ducimus delectus tenetur magnam eveniet in.

  • Test Panel

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ullam sapiente laboriosam tempore labore, ducimus delectus tenetur magnam eveniet in.

  • Test Panel

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ullam sapiente laboriosam tempore labore, ducimus delectus tenetur magnam eveniet in.

  • Test Panel

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ullam sapiente laboriosam tempore labore, ducimus delectus tenetur magnam eveniet in.

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>

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
draghandlebooleanfalseoptionally adds a drag handle under the slider
nextclsstringf-nextclass on item after the current active item, if fancy is enabled
prevclsstringf-previousclass 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