I try to build an accordion or slider element with Paragraphs.

Therefore I create a Slider element which had slides. Unfortunately the first element should always looks different. I can do this with a CSS class, but how to figure out which is the first slide?


<div class="feature-slider">
    <div class="feature-slider__slides">     
        <div class="feature-slider__slides-container">
            {{ content.field_feature_slider_slides }}

Slide (which will loaded through Drupal Magic):

<div class="feature-slide {% if pos == 1 %}feature-slide--active{% endif %}">

How can I get/set/access a variable (here pos) with the current position of the loop?

The Slider uses Paragraphs to add several Slides. The is a template for the slider paragraph--slider.html.twig and paragraph--slide.html.twig for the slides. No For-Loops are involved here. Drupal/Paragraphs rendering the slides through the template with content.field_feature_slider_slides from the slider.

1 Answer 1


For the Slide, are overriding the default field.html.twig template?
If yes, then you can use the Twig Loop variables:
e.g. loop.first

  • Thanks @Ismail but unfortunately it doesn't work. The slider is a file like paragraph--slider.html.twig and the slide is paragraph--slide.html.twig There is no for loop involved. I am so sorry. It's really hard to explain for me. Aug 11, 2017 at 12:13
  • @TobiasRedmann, this is the correct answer. Use the field template of the paragraph slide field. You can find it with Twig Debug. And for CSS it should be no problem, you often have to pick up classes on different levels of containers.
    – 4uk4
    Aug 11, 2017 at 14:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.