Migrationsanleitung jQuery Layerslider Plugin in TYPO3 Layerslider Extension

Die Integration des Layerslider Plugins in die TYPO3 Layerslider Extension ist sehr einfach. Installiere die TYPO3 Layerslider Extension (Pro oder Light Version) mit dem Extension Manager in Dein TYPO3. Inkludiere das statische Extension Template "Layerslider" in Deinem Root Template.

Öffne nun in Deinem Backend das Layerslider Modul (linke Leiste unter "Web"). In diesem Modul gibt es oben rechts einen Button "JS Migrationsassistent". Öffne diesen Assistenten.

Entpacke nun Dein Download des jQuery Layerslider Plugin in einem Verzeichnis auf Deinem Rechner. Ziehe den enthaltenen Ordner "layerslider" in den Uploadbereich des JS Migrationsasstistenten. Warte bis alle Dateien hochgeladen wurden und lade das Modul neu. Du kannst nun prüfen, ob alle Dateien angekommen sind.

Some other questions and answers

  • Install the extension (layerslider.zip) 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 :-)

f 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