Slick Content Element for Neos CMS
This is a ready to use implementation of the Javascript package slick.
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
This package uses background images as slide. If you want to use a fixed height for the slider you can use this as CSS:
Disabling / Enabling feature
The Slide and the Slider element have a few mixins, which you can enable / disable to add / remove a feature.
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
Mixin | Default value | Description |
---|---|---|
Noerdisch.Slick:Mixin.Autoplay | true | Autoplay option |
Noerdisch.Slick:Mixin.SlidesToScroll | true | How many slides scroll |
Noerdisch.Slick:Mixin.Infinite | true | Infinite scrolling |
Noerdisch.Slick:Mixin.Draggable | true | Draggable |
Noerdisch.Slick:Mixin.PauseOnHover | true | Pause on hover |
Noerdisch.Slick:Mixin.AnimationSpeed | true | Animation speed |
Noerdisch.Slick:Mixin.Fade | false | Fade |
Noerdisch.Slick:Mixin.Arrows | true | Arrows shown |
Noerdisch.Slick:Mixin.Dots | true | Dots shown |
Noerdisch.Slick:Mixin.SlidesToShow | true | Slide shown at once |
Noerdisch.Slick:Mixin.AdditionalClass | true | Additional CSS-Class |
Noerdisch.Slick:Mixin.Repsonsive.Sm | true | Responsive group mobile |
Noerdisch.Slick:Mixin.Repsonsive.Md | true | Responsive group tablet |
Noerdisch.Slick:Mixin.Repsonsive.Lg | true | Responsive group laptop |
Noerdisch.Slick:Mixin.Repsonsive.Xl | true | Responsive group desktop |
Noerdisch.Slick:Content.Slide
Mixins
Mixin | Default value | Description |
---|---|---|
Noerdisch.Slick:Mixin.BackgroundImage | true | Background iamge for Slide |
Noerdisch.Slick:Mixin.AdditionalClass | true | Additional CSS-Class |
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
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
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.
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
The MIT License (MIT). Please see License File for more information.