Slick Slider for TYPO3

Classification

slick

Version

main

Language

en

Description

Manage content elements, file collections and images with this responsive slider! Based on the slick carousel slider by Ken Wheeler. Scales with its container. Separate settings per breakpoint. Swipe, desktop mouse dragging, infinite looping, randomized order among others. Users can setup more than 50 properties by the plugin.

Keywords

rousel, contentslider, gallery, imageslider, slick, slider, slideshow,

Copyright

2014-2025

Website

 

Author

Dirk Wildt (Die Netzmacher)

Email

http://wildt.at.die-netzmacher.de

License

This document is published under the Open Publication License available from http://www.opencontent.org/openpub/ Logo and corporate design of Bündnis 90/Die Grünen isn't part of the Open Publication License. If you like to use this installer and you don't have the right for using Logo and corporate design of Bündnis 90/Die Grünen, you have to remove Logo and corporate design of Bündnis 90/Die Grünen after the installation.

Rendered

Mon, 02 Jun 2025 21:56:40 +0000

The content of this document is related to TYPO3, a GNU/GPL CMS/Framework available from www.typo3.org.

Table of Contents

Introduction

Table of Contents

Screenshots

Table of Contents

Frontend

Sliding

Sample with sliding of content elements and the TYPO3 Bootstrap-Introduction-Package

Sliding vertical

Sample with vertical sliding

Live

Live at http://gruene-passauland.de

Fading

Sample with fading of slick items.

Live

Live at https://die-netzmacher.de

Syncing

Sample with Slick Slider Syncing

Backend

Table of Contents

New Content Element Wizard

Slick provides four content elements:

• the slick slider with content elements (from TYPO3 8.7)
• the slick slider with file collections (from TYPO3 8.7)
• the slick slider with images (from TYPO3 8.7)
• and the slick slider item

You can use other slick slider content elements from former TYPO3 versions, but they aren't needed any longer and they are marked as deprecated.

Slick Slider with Content Elements

If you are using the Slick Slider with Content Elements, you can add every content element to the slider like headers, texts, images, sitemaps and html code among others.

There are a lot properties for adjustment:

• Usual adjustments
• Smartphone
• Tablet
• Desktop
• Wide screen
• and so called Rare adjustments

Slick Slider with File Collections

You can display files from directories. You have to include the system element file collection only.

Slick Slider with Images

If you are using the Slick Slider with Images, you can add every image to the slider.

Slick Slider Syncing

Enabling and setup syncing

What does it do?

Manage content elements, file collections and images with this responsive slider! Based on the slick carousel slider by Ken Wheeler. Scales with its container. Separate settings per breakpoint. Swipe, desktop mouse dragging, infinite looping, randomized order among others. Users can setup more than 50 properties by the plugin.

TYPO3 Slick Slider integrates Ken Wheelers responsive slider into TYPO3.

What do you need?

Users

Table of Contents

Slick Slider

Table of Contents

With Content Elements

You can slide every content element with "Slick Slider with Content Elements".

You can slide every element of a one or several pages two.

If you like to slide images only, the Slick Slider with Images is recommended.

The Slick Content Element is a content element optimised for sliding.

xBlog

The extension xBlog enables you, to display records of each extension with the Slick Slider.

Please refer to the manual at

• xBlog > Users > Best Practice > Slider

If link from above doesn't work, please refer to

• xBlog

and search for the word "slider".

With File Collections

You can display files from directories.

You have to include the system element file collection only.

With Images

You can slide images with "Slick Slider with Images".

If you like to slide different content elements than images, please use the Slick Slider with Content Element.

Slick Content Element

Slick Content Element is an content element optimised for sliding. It is similar to a banner.

It consists of

• a background image
• a header and
• a prompt

You can slide it with the Slick Slider with Content Element.

Layouts

Default

Properties:

• Content box

* is placed on the bottom

• has full width
• has a transparent white background

Layout 1

Properties:

Same as Layout 1 but

• Content box

* width is set to auto

• alignment is left

Layout 2

Properties:

Same as Layout 1 but

• Content box

* width is set to auto

• alignment is right
• has a transparent white background

Layout 3

Properties:

• Content box

* is placed on the bottom

• header and text has a shadow

Best Practice

Table of Contents

Randomized Order

If you like a randomized order of your slides, please setup this porperty by the plugin / flexform. See

• Plugin > Slick Slider > Usual Adjustments > Display slides in randomized order: [Enabled]

Syncing

You can enable and syncing by the plugin / flexform. See

• Plugin > Slick Slider > Syncing

Administrators

Table of Contents

Installation

• Install and enable this extension supported by the extension manager.
• Include the static template
• If jQuery is not loaded, you must include it like in the snippet below

page.includeJSFooterlibs.jqquery = EXT:slick/Resources/Public/JavaScript/vendor/jquery.js

Setup

You are controlling a lot of properties within the plugins

• Slick Slider with Content Elements
• Slick Slider with File Collections
• Slick Slider with Images

The Slick Item has a small configuration by the Constant Editor. Usually you don't need to change any property.

Table of Contents

Slick Item

You are controlling some properties with the TYPO3-User-Interface Constant Editor.

See categories:

• SLICK - ITEM ...

Usually you don't need to configure the Slick Content Element.

Best Practice

Please refer to the Slick demo website at https://kenwheeler.github.io/slick/

Developers

You are welcome to develop TYPO3 Slick.

If you like to use the latest extensions, you can get them at gitlab.die-netzmacher.de.

Table of Contents

Debugging

Third Party Extensions

It's easy to use the slick slider within a third party extension.

<div id="slickcarousel1" class="slick-item">
  <!-- Your slick items --/>
</div>

<div id="slickcarousel1" class="slick-item">
  <div>
    Item 1
  </div>
  <div>
    Item 2
  </div>
  <div>
    Item 3
  </div>
</div>

Known Bugs

Sitemap

Index