PHPackages                             derralf/elemental-slickslider - 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. [Utility & Helpers](/categories/utility)
4. /
5. derralf/elemental-slickslider

ActiveSilverstripe-vendormodule[Utility & Helpers](/categories/utility)

derralf/elemental-slickslider
=============================

A content block with a basic Slick Carousel silverstripe-elemental module

05PHP

Since Jul 30Pushed 1y ago1 watchersCompare

[ Source](https://github.com/derralf/silverstripe-elemental-slickslider)[ Packagist](https://packagist.org/packages/derralf/elemental-slickslider)[ RSS](/packages/derralf-elemental-slickslider/feed)WikiDiscussions main Synced 3d ago

READMEChangelogDependenciesVersions (1)Used By (0)

SilverStripe Elemental Slick-Sliders Block
==========================================

[](#silverstripe-elemental-slick-sliders-block)

A block that displays basic Slick Carousel
(private project, no help/support provided)

Requirements
------------

[](#requirements)

- SilverStripe CMS ^5
- dnadesign/silverstripe-elemental ^4 || ^5
- silverstripe/linkfield ^4
- jonom/focuspoint ^5
- symbiote/silverstripe-gridfieldextensions ^4

Important:
You have to add the Slick CSS/JS files and jQuery to your project yourself.
You also have to initialize the carousel yourself (e.g.`$('.element-slick-slider').slick({rows: 0});`).
Some sample templates for Bootstrap 5 are included, you may adjust them to your needs.

Suggestions
-----------

[](#suggestions)

- derralf/elemental-styling

Modify `/templates/Derralf/Elements/Slickslider/Includes/Title.ss` to your needs when using StyledTitle from derralf/elemental-styling.

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

[](#installation)

- Install the module via Composer ```
    composer require derralf/elemental-slickslider

    ```

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

[](#configuration)

A basic/default config. Add this to your **mysite/\_config/elements.yml** and comment/uncomment/add/remove/modify the needed lines

Note the options for `styles` and `image_view_modes`, in which the templates contained in the extension are listed.

Optionally you may set `defaults:Style`to any of the available `styles`.

```

---
Name: elementalslickslider
---
Derralf\Elements\SlickSlider\Element\ElementSlickSliderHolder:
  slick_carousel_default_config: '{"speed":200,"dots":false,"infinite":true,"slidesToShow":5,"centerMode":false,"variableWidth":false,"adaptiveHeight":true,"responsive":[{"breakpoint":1200,"settings":{"slidesToShow": 1}},{"breakpoint":992,"settings":{},{"breakpoint":768,"settings":{}},{"breakpoint":600,"settings":{}}]}'
  # add StyledTitle
  extensions:
    - Derralf\ElementalStyling\StyledTitle
  # disable StyledTitle
  title_tag_variants: null
  title_alignment_variants: null
  # styles
  style_default_description: 'Standard: 100% Content-Breite'
  styles:
    BS5RightFiftyFifty: "BS5 Slider rechts, 50%"
    BS5LeftFiftyFifty: "BS5 Slider links, 50%"

Derralf\Elements\SlickSlider\Model\ElementSlickSliderItem:
  use_content: true
  readmore_link_class: 'btn btn-sm btn-primary btn-readmore'
  styles:
    default: 'default'
    bottom-left: 'links unten'
    center-center: 'zentriert'
    grey: 'grau'
    primary: 'petrol'
    primary-dark: 'petrol dunkel'
    secondary: 'grün'

```

Additionally you may apply the default styles:

```
# add default styles
DNADesign\Elemental\Controllers\ElementController:
  default_styles:
    - derralf/elemental-slickslider:client/dist/styles/frontend-default.css

```

See Elemental Docs for [how to disable the default styles](https://github.com/dnadesign/silverstripe-elemental#disabling-the-default-stylesheets).

### Adding your own templates

[](#adding-your-own-templates)

Some sample templates for Bootstrap 5 are included.
You may add your own templates/styles like this:

```
Derralf\Elements\SlickSlider\Element\ElementSlickSliderHolder:
  styles:
    MyCustomTemplate: "new customized special Layout"

```

...and put a template named `ElementSlickSliderHolder_MyCustomTemplate.ss`in `themes/{your_theme}/templates/Derralf/Elements/SlickSlider/Element/`
**and/or**add styles for `.derralf__elements__slickslider__element__elementslicksliderholder.mycustomtemplate` to your style sheet

Template Notes
--------------

[](#template-notes)

Included templates are based on Bootstrap 5 but may require extra/additional styling (see included stylesheet).

- Optionaly, you can require basic CSS stylings provided with this module to your controller class like: **mysite/code/PageController.php**```
        Requirements::css('derralf/elemental-slickslider:client/dist/styles/frontend-default.css');

    ```

    or copy over and modify `client/src/styles/frontend-default.scss` in your theme scss

Screen Shots
------------

[](#screen-shots)

(not available)

###  Health Score

14

—

LowBetter than 1% of packages

Maintenance27

Infrequent updates — may be unmaintained

Popularity4

Limited adoption so far

Community4

Small or concentrated contributor base

Maturity18

Early-stage or recently created project

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.

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/1495867?v=4)[derralf](/maintainers/derralf)[@derralf](https://github.com/derralf)

### Embed Badge

![Health badge](/badges/derralf-elemental-slickslider/health.svg)

```
[![Health](https://phpackages.com/badges/derralf-elemental-slickslider/health.svg)](https://phpackages.com/packages/derralf-elemental-slickslider)
```

PHPackages © 2026

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