Slideshow

Create a responsive image or video slideshow with stunning transition effects, fullscreen mode and overlays.

Usage

To create a slideshow, just add the .f-slideshow class to a <ul> element and place your images inside the list items. In order to load the necessary JavaScript, you also need to add the data-f-slideshow attribute.

Example

Note To activate autoplay, just add the {autoplay:true} option to the data attribute.

Markup

<ul class="f-slideshow" data-f-slideshow="{autoplay:true}">
	<li><img src="" width="" height="" alt=""></li>
</ul>

To navigate through your slides, just use the data-f-slideshow-item attribute. To target the slides, you need to set the data attribute of every nav item to the number of the respective slideshow item. The elements with the data-f-slideshow-item attribute need to be inside the data-f-slideshow container.

Markup

<div class="f-slidenav-position" data-f-slideshow>
	<ul class="f-slideshow">
		<li></li>
		<li></li>
	</ul>
	<ul class="f-dotnav f-dotnav-contrast f-position-bottom f-flex-center">
		<li data-f-slideshow-item="0"><a href="">...</a></li>
		<li data-f-slideshow-item="1"><a href="">...</a></li>
	</ul>
</div>

Setting the attribute to next and previous will switch to the adjacent slides.

Markup

<div class="f-slidenav-position" data-f-slideshow>
	<button class="f-btn-faux f-slidenav f-slidenav-contrast f-slidenav-previous" data-f-slideshow-item="previous"><i class="material-icons">&#xE314;</i></button>
	<ul class="f-slideshow">
		<li></li>
		<li></li>
	</ul>
	<button class="f-btn-faux f-slidenav f-slidenav-contrast f-slidenav-next" data-f-slideshow-item="next"><i class="material-icons">&#xE315;</i></button>
</div>

Slidenav and Dotnav

The flexibility of the Slideshow component enables you to use any of the other FatKit components to navigate through items. For example the Slidenav and Dotnav can be used to style the slideshow navigations as you can see below.

Note You can have automatic dotnav by including the option dotnav: true. You will need to make sure your slideshow has a container with a class of f-slidenav-position in order for the dotnav to appear correctly.

Example

Markup

<div class="f-slidenav-position" data-f-slideshow>
	<button class="f-btn-faux f-slidenav f-slidenav-contrast f-slidenav-previous" data-f-slideshow-item="previous"><i class="material-icons">&#xE314;</i></button>
	<ul class="f-slideshow">
		<li></li>
		<li></li>
	</ul>
	<button class="f-btn-faux f-slidenav f-slidenav-contrast f-slidenav-next" data-f-slideshow-item="next"><i class="material-icons">&#xE315;</i></button>
	<ul class="f-dotnav f-dotnav-contrast f-position-bottom f-text-center">
		<li data-f-slideshow-item="0"><a href=""></a></li>
		<li data-f-slideshow-item="1"><a href=""></a></li>
	</ul>
</div>

or

<div class="f-slidenav-position" data-f-slideshow="{dotnav:true}">
	<button class="f-btn-faux f-slidenav f-slidenav-contrast f-slidenav-previous" data-f-slideshow-item="previous"><i class="material-icons">&#xE314;</i></button>
	<ul class="f-slideshow">
		<li></li>
		<li></li>
	</ul>
	<button class="f-btn-faux f-slidenav f-slidenav-contrast f-slidenav-next" data-f-slideshow-item="next"><i class="material-icons">&#xE315;</i></button>
</div>

Transitions

The Slideshow component allows you to add different animations to items when switching between them. All you need to do is add the animation parameter to the data-attribute and define the animation that you want to apply. Check the table below for an overview of the animations provided.

Class Description
fade The item fades in.
scroll The items scroll in.
scale The items scale up on out.
swipe The items swipe in and out.

To apply these more advanced transitions, the slideshowfx.js file needs to be included in the document.

Class Description
slice-down The items slide down in slices.
slice-up The items slide up in slices.
slice-up-down The sliced items slide in alterning directions.
fold The items are folded in.
puzzle The items are divided in squares that randomly fade in.
boxes The items are divided in squares that scale in diagonally from the top left corner.
boxes-reverse The items are divided in squares that scale in diagonally from the bottom right corner.
random-fx Different animations are applied randomly.

Example

  • Scroll

  • Scale

  • Swipe

  • Slice Down

  • Slice Up

  • Slice Up Down

  • Fold

  • Puzzle

  • Boxes

  • Boxes Reverse

Random Effect

Markup

<ul class="f-slideshow" data-f-slideshow="{animation: 'random-fx'}">...</ul>

Slideshow with Slider and Lightbox

Markup

<div data-f-slideshow="{ autoplay : true, animation : 'swipe' }">
	<div class="f-slidenav-position">
		<ul class="f-slideshow">
			<li>
				<a href="..." data-f-lightbox="{ group : '...' }" data-lightbox-type="image" title="...">
					<img src="..." alt="...">
				</a>
			</li>
		</ul>
	</div>
	<div class="f-slidenav-position" data-f-slider="{ infinite: false }" data-f-check-display>
		<div class="f-slider-container">
			<ul class="f-slider f-grid f-grid-collapse f-grid-width-medium-1-3">
				<li data-f-slideshow-item="0"><img alt="..." src="..."></li>
			</ul>
		</div>
	</div>
</div>

Ken Burns effect

The Ken Burns effect can also be applied to slideshow items. Just add the {kenburns:true} option to the data attribute. This effect can also be applied to videos.

Example

Markup

<ul class="f-slideshow" data-f-slideshow="{kenburns:true}">...</ul>

Fullscreen slideshow

To create a fullscreen slideshow that stretches to fill the entire viewport, just add the .f-slideshow-fullscreen class.

Markup

<ul class="f-slideshow f-slideshow-fullscreen" data-f-slideshow>...</ul>

Overlays

You can also enhance slideshows with different overlays. Just add the .f-f-overlay-panel to a <div> element inside the list item. Also add .f-overlay-background and .f-overlay-fade to show a background and a transition. To toggle the overlay once a slide becomes active add the .f-f-overlay-active to the list container. For more options, check out the Overlay component.

Example

  • Overlay

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

  • Overlay Top

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

  • Overlay Bottom

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

  • Overlay Left

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

  • Overlay Right

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

Markup

<ul class="f-slideshow f-overlay-active" data-f-slideshow>
	<li>
		<img src="" width="" height="" alt="">
		<div class="f-overlay-panel f-overlay-background f-overlay-fade">...</div>
	</li>
</ul>

Video

FatKit allows you to present both video elements and Iframes within a slideshow.

Example

Markup

<!-- This is a slideshow with a video element -->
<ul class="f-slideshow">
	<li>
		<video width="" height="" autoplay loop muted controls>
			<source src="" type="">
		</video>
	</li>
</ul>

<!-- This is a slideshow with an Iframe -->
<ul class="f-slideshow">
	<li>
		<iframe src="" width="" height="" frameborder="0" allowfullscreen></iframe>
	</li>
</ul>

Content

You can basically insert any content, like text or an entire grid as slideshow items.

Example

  • Headline 1

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

  • Headline 2

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.


JavaScript Options

Option Default Description
animation 'fade' Defines the preferred transition between items.
dotnav boolean Automatically create a dotnav
duration 500 Defines the transition duration.
height 'auto' Defines the slideshow height.
start 0 Defines the first slideshow item to be displayed.
autoplay false Defines whether or not the slideshow items should switch automatically.
pauseOnHover true Pause autoplay when hovering a slideshow.
autoplayInterval 7000 Defines the timespan between switching slideshow items.
videoautoplay true Defines whether or not a video starts automatically.
videomute true Defines whether or not a video is muted.
kenburns false Defines whether or not the Ken Burns effect is active.
kenburnsanimations 'f-animation-middle-left',
'f-animation-top-right',
'f-animation-bottom-left',
'f-animation-top-center',
'f-animation-bottom-right'
Animation series
slices 15 Defines the number of slices, if a "Slice" transition is set.

Init element manually

var slideshow = FatKit.slideshow(element, { /* options */ });

Events

Name Parameter Description
show.f.slideshow event, next slide, current slide, direction (1 for forward, -1 for back) On slide change
beforeshow.f.slideshow event, next slide, current slide, direction (1 for forward, -1 for back) Before showing a new slide (before animation is finished)