How to migrate the jQuery layerslider plugin into the TYPO3 Layerslider Extension

The migration of the jQuery layerslider plugin into the TYPO3 layerslider extension is very easy. Install at first the layerslider extension (pro or light version) within the extension manager in your TYPO3 project. Then include the static extension template "layerslider" in your root template.

Now open the layerslider backend module, you find these in the left sidebar in the section web. In this module, you will find a button "JS migration assistent" on the top right corner. Click it!

Now you can extract the jquery layerslider plugin on your local machine in any folder. There appears an folder named "layerslider". Just drag and drop the complete folder to the upload area in the TYPO3 migration assistant. The assistant move all files to right place. After all files are uploaded, you can reload the assistant, it shows you if alle files on the right place.

Some other questions and answers

  • Install the extension ( with the extension manager or extract the zip and upload the content in typo3conf/ext/layerslider - Include the static typoscript template "layerslider" in your root template!
  • Check the constant editor "PLUGIN.TX_LAYERSLIDER (6)" for some setting about the include from jquery and other needed libraries. Use always the latest jquery library!
  • Under the "layerslider" Webmodule you can start create new sliders - For each slider you can create slides. A slide is at least one image an can have layers. Each layer can be a text, header, paragraph, image or pure html code.
  • Check out the Slider options, there are some preinstalled skins!
  • Responsive: the slider works responsive out of the box. You can set the width/height of the slider in the slider options. Recommend is that you use the width/height from your slider images! By example: Images are 1280x720, set the width/height at this values! If you have a div in frontend with 960px, the slider goes down to this 960px by self, and all sublayers would find their new position automatic!
  • Place the plugin "Layerslider" on a page. If you dont have changed the "storagePid" your sliders are located on the first page (id 0) in your TYPO3 installation. Select from this page a slider and save the content element.
  • Enjoy it :-)

If you have a TYPO3 installation with multiple websites, you can set different pages to save the slider.

Just include on every website starting page the static extension template as described above. Insert in your template constants on each starting page this line: plugin.tx_layerslider.persistence.storagePid = X X is the page where the sliders would be saved. The layerslider Backend Module ist listen to this value too. Now you have only the sliders in the backend list from the page X.

You can set a new value on each page in the tree.

You can include a own css file to style your layer content. You can style h1,h2,h3,h4,h5,h6,p and span with a default style. To address the css correct to the elements by default, and separate the css for each slider, use this css code:

.layerslider-1 h1 {}


Only h1 elements on the slider with the uid 1 is now styled. h1 in each other slider ore not affected. You can style all h1 in all sliders, on all slides too, use this code by example:

.ls-slide h1 {}


You can address elements in a sliders by a single slide too. Address the correct slide with a mix of the slider uid and the slide uid:

.ls-slider-1-slide-1 h1 {}


Each number in each class came from the uid of an element. To get the sliders uid jus mouseover in the Backend on the list of all sliders the slider name. And to get the uid of an slide, make an mouseover in the slide list of an slider.

You can set your own CSS file by set the constants in the constant editor. Here comes a list of the default constant settings in the extension template:

# Set 0 to 1 to include a specific css file in the backend module
plugin.tx_layerslider.settings.useAdditionalBackendCSS.useInBE = 0

# Set 0 to 1 to include a specific css file in the frontend
plugin.tx_layerslider.settings.useAdditionalBackendCSS.useInFE = 0

# Set the full path to the css file from your document root with a starting slash
plugin.tx_layerslider.settings.useAdditionalBackendCSS.path = /typo3conf/ext/layerslider/Resources/Public/css/additionalStyles.css