PHPackages                             noerdisch/neos-slick - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. noerdisch/neos-slick

AbandonedNeos-plugin

noerdisch/neos-slick
====================

Neos CMS plugin for a slick slider content element

v1.5.0(7y ago)21.0k3[3 issues](https://github.com/noerdisch/neos-slick/issues)[7 PRs](https://github.com/noerdisch/neos-slick/pulls)MITJavaScript

Since Sep 14Pushed 5y ago4 watchersCompare

[ Source](https://github.com/noerdisch/neos-slick)[ Packagist](https://packagist.org/packages/noerdisch/neos-slick)[ RSS](/packages/noerdisch-neos-slick/feed)WikiDiscussions master Synced today

READMEChangelog (8)Dependencies (4)Versions (71)Used By (0)

 [ ![](https://camo.githubusercontent.com/cf66a178f9eb8c4fcddbbfd6d53daaaf3eb8db1d4fad052f603434aa1ba0f4b6/68747470733a2f2f63646e2e7261776769742e636f6d2f6d61726b75736775656e746865722f61626537306433346634613436323161656430656635303463356430313932622f7261772f356266306633646633323865353862613761616430363761353663626431633135656636393439312f6c6f676f5f66756c6c2e737667) ](https://www.noerdisch.de)

[![Packagist](https://camo.githubusercontent.com/459b4ee92d4905f0396b102c5adcc0c1e73d928ac0d554d998d35ae57a09cbfb/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6e6f657264697363682f6e656f732d736c69636b2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/noerdisch/neos-slick)[![Packagist](https://camo.githubusercontent.com/439ff0d9eb268632824e9f4d04f989bc43595132f3d6db9d5f87e5f8fd340311/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6e6f657264697363682f6e656f732d736c69636b2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/noerdisch/neos-slick)[![semantic-release](https://camo.githubusercontent.com/5f3b57745af83409bc673dec57e3eb360e1ec53b37ac29f81a319e347fa351c6/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532302532302546302539462539332541362546302539462539412538302d73656d616e7469632d2d72656c656173652d6531303037392e737667)](https://github.com/semantic-release/semantic-release)[![Twitter Follow](https://camo.githubusercontent.com/33d3414c2d495d5990b9bb8fe903a15f093eaa4a7ca65883201b29a1c047c943/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f666f6c6c6f772f6e6f657264697363682e7376673f7374796c653d736f6369616c266c6162656c3d466f6c6c6f77267374796c653d666c61742d737175617265)](https://twitter.com/noerdisch) [![Greenkeeper badge](https://camo.githubusercontent.com/f5be3419ff569c6e800bcce369f330c1d24909115d51e630e48d6196b32ae9de/68747470733a2f2f6261646765732e677265656e6b65657065722e696f2f6e6f657264697363682f6e656f732d736c69636b2e737667)](https://greenkeeper.io/)

Slick Content Element for Neos CMS
==================================

[](#slick-content-element-for-neos-cms)

This is a ready to use implementation of the Javascript package [slick](http://kenwheeler.github.io/slick/).

Installation
------------

[](#installation)

Most of the time you have to make small adjustments to a package (e.g., the configuration in Settings.yaml). Because of that, it is important to add the corresponding package to the composer from your theme package. Mostly this is the site package located under Packages/Sites/. To install it correctly go to your theme package (e.g.Packages/Sites/Foo.Bar) and run following command:

```
composer require noerdisch/neos-slick --no-update
```

The --no-update command prevent the automatic update of the dependencies. After the package was added to your theme composer.json, go back to the root of the Neos installation and run composer update. Your desired package is now installed correctly.

Usage
-----

[](#usage)

This package uses background images as slide. If you want to use a fixed height for the slider you can use this as CSS:

```
.slick-slide {
    min-height: ;
}
.slide__inner {
    height: 100%;
    width: 100%;
    position: absolute;
}
```

### Disabling / Enabling feature

[](#disabling--enabling-feature)

The Slide and the Slider element have a few mixins, which you can enable / disable to add / remove a feature.

#### Example

[](#example)

If you want to disbale the autoplay option in the backend, you can do this:

```
'Noerdisch.Slick:Content.Slider':
  superTypes:
    'Noerdisch.Slick:Mixin.Autoplay': false
```

#### `Noerdisch.Slick:Content.Slider` Mixins

[](#noerdischslickcontentslider-mixins)

MixinDefault valueDescriptionNoerdisch.Slick:Mixin.AutoplaytrueAutoplay optionNoerdisch.Slick:Mixin.SlidesToScrolltrueHow many slides scrollNoerdisch.Slick:Mixin.InfinitetrueInfinite scrollingNoerdisch.Slick:Mixin.DraggabletrueDraggableNoerdisch.Slick:Mixin.PauseOnHovertruePause on hoverNoerdisch.Slick:Mixin.AnimationSpeedtrueAnimation speedNoerdisch.Slick:Mixin.FadefalseFadeNoerdisch.Slick:Mixin.ArrowstrueArrows shownNoerdisch.Slick:Mixin.DotstrueDots shownNoerdisch.Slick:Mixin.SlidesToShowtrueSlide shown at onceNoerdisch.Slick:Mixin.AdditionalClasstrueAdditional CSS-ClassNoerdisch.Slick:Mixin.Repsonsive.SmtrueResponsive group mobileNoerdisch.Slick:Mixin.Repsonsive.MdtrueResponsive group tabletNoerdisch.Slick:Mixin.Repsonsive.LgtrueResponsive group laptopNoerdisch.Slick:Mixin.Repsonsive.XltrueResponsive group desktop#### `Noerdisch.Slick:Content.Slide` Mixins

[](#noerdischslickcontentslide-mixins)

MixinDefault valueDescriptionNoerdisch.Slick:Mixin.BackgroundImagetrueBackground iamge for SlideNoerdisch.Slick:Mixin.AdditionalClasstrueAdditional CSS-Class### Fade option

[](#fade-option)

The fade options is disabled by default, because if you enable fade, the slides to show options isn't working. But you can simply enable it like this:

```
'Noerdisch.Slick:Content.Slider':
  superTypes:
    'Noerdisch.Slick:Mixin.Fade': true
    'Noerdisch.Slick:Mixin.SlidesToShow': false
```

Configuration
-------------

[](#configuration)

```
Noerdisch:
  Slick:
    # include the theme css file form slick
    theme: true
    backend:
      # disables autoplay in backend
      disableAutoplay: true
    # breakpoints for the repsonsive tab
    responsive:
      sm: 576px
      md: 768px
      lg: 992px
      xl: 1200px
```

Contribution
------------

[](#contribution)

We'd love you to contribute to neos-slick. We try to make it as easy as possible. We are using semantic-release to have more time to concentrate on important stuff instead of struggling in the dependency or release hell.

Therefore the first rule is to follow the [eslint commit message guideline](https://github.com/conventional-changelog-archived-repos/conventional-changelog-eslint/blob/master/convention.md). It is really easy, when you always commit via `yarn commit`. Commitizen will guide you.

All PRs will be merged into the master branch. Travis and semantic release will check the commit messages and start building a new release when the analysis of the latest commits will trigger that.

If you have questions just ping us on twitter or github.

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE) for more information.

###  Health Score

31

—

LowBetter than 68% of packages

Maintenance0

Infrequent updates — may be unmaintained

Popularity19

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity77

Established project with proven stability

 Bus Factor2

2 contributors hold 50%+ of commits

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

9

Last Release

2792d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/19538775?v=4)[nœrdisch GmbH](/maintainers/noerdisch)[@noerdisch](https://github.com/noerdisch)

---

Top Contributors

[![semantic-release-bot](https://avatars.githubusercontent.com/u/32174276?v=4)](https://github.com/semantic-release-bot "semantic-release-bot (7 commits)")[![markusguenther](https://avatars.githubusercontent.com/u/1014126?v=4)](https://github.com/markusguenther "markusguenther (5 commits)")[![abteilung](https://avatars.githubusercontent.com/u/906305?v=4)](https://github.com/abteilung "abteilung (4 commits)")[![greenkeeper[bot]](https://avatars.githubusercontent.com/in/505?v=4)](https://github.com/greenkeeper[bot] "greenkeeper[bot] (3 commits)")

---

Tags

contentelementneos-cmsneos-pluginneoscmsresponsiveslick-carousel

### Embed Badge

![Health badge](/badges/noerdisch-neos-slick/health.svg)

```
[![Health](https://phpackages.com/badges/noerdisch-neos-slick/health.svg)](https://phpackages.com/packages/noerdisch-neos-slick)
```

###  Alternatives

[neos/neos-ui

Neos CMS UI written in React

2661.0M104](/packages/neos-neos-ui)[neos/neos

An open source Content Application Platform based on Flow. A set of core Content Management features is resting within a larger context that allows you to build a perfectly customized experience for your users.

116989.0k674](/packages/neos-neos)[neos/eel

The Embedded Expression Language (Eel) is a building block for creating Domain Specific Languages

122.0M27](/packages/neos-eel)[flowpack/searchplugin

Plugin for search integration via content node

24257.5k1](/packages/flowpack-searchplugin)[neos/form-builder

Flow Form Framework integration into Neos CMS

19347.1k18](/packages/neos-form-builder)[neos/media

The Media package

101.1M45](/packages/neos-media)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)