How can I have a nested slideshow with paragraphs and views?

Question

Initial situation

I have a node type with a paragraph field. Each paragraph of the paragraph field is rendered among themselves.

What I want to achieve

• The paragraph field inside the node should render all the paragraphs as a slick slideshow.
• The node containing the paragraph field and all the paragraphs should also be part of a (second) slick slideshow (via a view filtered by the content type).

In short, the user will have finally a slideshow (with the single paragraphs) nested in a second slideshow (with the nodes).

Problems

The module slick views allows it to display the nodes of the node type as a slider. That's fine to realize the node slider.

The module slick paragraph only allows to create slideshows as a paragraph type, but not rendering the paragraphs of a node themselves as part of a slideshow. They are still rendered among themselves inside the "node slider".

So here i struggle a bit - any idea?

Thanks in advance, Phil

Answer 1

You could achieve this with more control by overriding node/field/paragraph templates in your theme to get the required markup, then creates the Slick sliders via custom JS code.

If you never worked with templates, you should start here https://www.drupal.org/docs/8/theming/twig/working-with-twig-templates

Answer 2

In addition to Cedric_a answer, you can also make a slick view of paragraphs instead of nodes (when you create your view at first, instead of choosing show: Content, choose show:Paragraphs) and filter it with paragraph type.
If it is not enough because you use a paragraph type on several entities, you can add a relationship "Content using field_you_field_name" + use a simple filter on the content ID using this relationship.
Paragraphs are entities used by other entities (nodes) using a field bridge. A field bridge means relationship in views. You can generally bridge entities in views thanks to relationships.

Answer 3

Thank you all very much for all your answers and hints.

The following steps worked for me now:

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.