How Print individual fields in a view row by row

Question

I have so much fields in a content like "title", "field_image", "field_description", and i use a view for create a block and put it on my front page...

I will make a slider with a jquery plugin (jssor slider), i need use the structure of jssor slider. then in my view, i use "views-view-fields--[name_machine]--block.html.twig" for print individual fields. but the file "views-view-fields..." print for each content, run all code on this file,and i need to put the initial containers of this plugin only once, and the code of the images several times.

I try to put the initial containers of the plugin in the "page.html.twig" but when i print the block with the "views-view-fields..." inside he puts a lot of code and many labels and containers that I do not need and the plugin stops working. let me show the files.

my page.html.twig {# Header #} {% if page.banner_front %}

    <div id="jssor_1">
      <!-- Loading Screen -->
      <div data-u="loading" class="jssorl-009-spin">
          <img src="/images/spin.svg" />
      </div>
      <div data-u="slides"> 

        {% block banner_front %}
            {{ page.banner_front }}
        {% endblock %}

      </div>       
     </div>

then my views-view-fields--banner--block.html.twig:

           <div data-b="0">
                <img data-u="image" src="{{ fields.field_imagen.content }}"/>
                <div class="caption-banner" data-u="caption" data-t="0">
                    <div class="title-banner">
                        {% if fields.title.content %}
                            {{ fields.title.content }}
                        {% endif %}
                    </div>
                    <div class="description-banner">
                        {% if fields.banner_description.content %}
                            {{ fields.banner_description.content }}
                        {% endif %}
                    </div>
                    {% if fields.field_url.content %}
                        <a href="#" target="_blan">   
                            <div class="btn-ver">Ver más</div>
                        </a>
                    {% endif %}
                </div>
            </div>

to work correctly, the label <div data-b = '0'> must be left of the label <div data-u = 'slides'>, but when the region is printed the system prints many labels and containers that damage the structure of the slider.

On Drupal 7 i used inside of the foreach the code of the images, and outside the inicial structure, and works well but now, i dont know how to this.

Thanks a lot.

Answer 1

If you work with Format:Unformatted list try to override the views-view-unformatted.html.twig, you will have the ability to add class to parent or inside each row.