I want to use paragraphs to implement a carousel, and for now, I have the outer paragraph called slideshow, and the template is paragraph--slideshow.html.twig. Then, inside this paragraph, I can add slides, and the template is paragraph--slide.html.twig.

At the moment, I only have the default paragraphs template which looks like this:

  set classes = [
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
    not paragraph.isPublished() ? 'paragraph--unpublished'

{% block paragraph %}
  <div{{ attributes.addClass(classes) }}>
    {% block content %}
      {{ content }}
    {% endblock %}
{% endblock paragraph %}

Problem: When I view the page in the front-end, all slide divs have the exact same properties.

Question: How do I count a display the number of paragraphs of the same type? Is there a way to add indexing?

The html should look like this:

<div class="paragaph-1 other_classes"></div>
<div class="paragaph-2 other_classes"></div>
<div class="paragaph-3 other_classes"></div>
<div class="paragaph-4 other_classes"></div>
  • You have to look what's inside {{ content }}. Install the Twig Tweak module and then print {{ dd() }} inside your template. The slides are probably somewhere in {{ content.field_slides|field_value }} or similar. Get the field items, loop, build the markup and attach libraries as you need it. Maybe enable Twig debugging first. Read drupal.org/docs/theming-drupal/twig-in-drupal/… and drupal.org/docs/theming-drupal/twig-in-drupal/….
    – leymannx
    Jun 14, 2021 at 19:57
  • 1
    Yes, this is one way, but bypassing the field template can have some unwanted side-effects. Better render {{ content }} as it is and use the resulting field template to output the index and adjust the CSS to the template structure. See drupal.stackexchange.com/questions/244152/…
    – 4uk4
    Jun 14, 2021 at 21:03


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.