Drupal How to: Build a slideshow in a slideshow with Paragraph and slick

Geändert
Sat, 05/04/2019 - 14:48

For a web project I'm currently developing, I had to find a way to serve a slideshow in another slideshow. IMHO it's a good UI solution to serve content smart, fast and responsive, which is a base requirement for mobile web devices. After some research I decided to go on with slick as slideshow base tool. Other slideshow tools aren't so flexible and extendable than slick carousel is.

The joint venture between slick carousel and the blazy library are also a very great effort to mobile users, to serve content compressed if necessary.

I would like to use paragraph module too, so that content editors have also a good UI and so a UX as great as possible. Since Drupal 8.7 layout builder is marked as stable now, it can be a suitable alternative. But I think, depending on the technical skills of your users, it's easier to learn them handle their nodes inside one editing form, instead of explain them using using a view, an edit and a layout mode of a node. And nearly everyone played with Lego bricks during childhood, right ;-) ?

The solution, I have found, needs

  • Slick module
  • Slick Paragraphs module
  • Slick Views module

Now let's dive in deeper:

How to create the "inner" slider:

  1. Install and activate the module Slick Paragraphs.
  2. In my node type I created a new display mode.
  3. Inside the display mode my paragraphs field uses "Slick Paragraphs Vanilla" as its formatter. In the formatter you can adjust some settings. I used in this use case "default" everywhere.
  4. Now every paragraph in the node is rendered as a slick slide slider.

How to create the "outer" slider

  1. Install and activate the module Slick Views.
  2. Create a new view (in my case a page) and use "Slick Carousel" as format. I used here display "content" and used my display mode I created earlier.
  3. Set your views filters as you need (in my case the content type of the node) additionally.

If you call the url of the view page, Drupal renders a flexible slideshow in another very flexible slideshow.

 

Add new comment

The content of this field is kept private and will not be shown publicly.