unikka/neos-slick

Plugin for the Neos CMS that provides a slick slider content element

Installs: 100

Dependents: 0

Suggesters: 0

Stars: 3

Watchers: 2

Forks: 2

Open Issues: 5

Language:JavaScript

Type:neos-plugin


README

68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f756e696b6b612f756e696b6b612e64652f7372632f6173736574732f756e696b6b615f776974685f6261636b67726f756e642e737667

Packagist Code Climate maintainability Packagist semantic-release Greenkeeper badge

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 unikka/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:

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

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:

'Unikka.Slick:Content.Slider':
  superTypes:
    'Unikka.Slick:Mixin.Autoplay': false

Unikka.Slick:Content.Slider Mixins

Mixin Default value Description
Unikka.Slick:Mixin.Autoplay true Autoplay option
Unikka.Slick:Mixin.SlidesToScroll true How many slides scroll
Unikka.Slick:Mixin.Infinite true Infinite scrolling
Unikka.Slick:Mixin.Draggable true Draggable
Unikka.Slick:Mixin.PauseOnHover true Pause on hover
Unikka.Slick:Mixin.AnimationSpeed true Animation speed
Unikka.Slick:Mixin.Fade false Fade
Unikka.Slick:Mixin.Arrows true Arrows shown
Unikka.Slick:Mixin.Dots false Dots shown
Unikka.Slick:Mixin.SlidesToShow true Slide shown at once
Unikka.Slick:Mixin.AdditionalClass true Additional CSS-Class
Unikka.Slick:Mixin.Repsonsive.Sm true Responsive group mobile
Unikka.Slick:Mixin.Repsonsive.Md true Responsive group tablet
Unikka.Slick:Mixin.Repsonsive.Lg true Responsive group laptop
Unikka.Slick:Mixin.Repsonsive.Xl true Responsive group desktop

Unikka.Slick:Content.Slide Mixins

Mixin Default value Description
Unikka.Slick:Mixin.BackgroundImage true Background iamge for Slide
Unikka.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:

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

Configuration

Unikka:
  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.

About

The package is based on the Noerdisch/Slick package. We thank the Noerdisch team for all the efforts.

License

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