{% set classes = [
  'block-slider',
  'inspiro-slider',
  'slider-halfscreen',
  'dots-creative',
  'block--type--' ~ paragraph.bundle|clean_class,
  view_mode ? 'block--view-mode--' ~ view_mode|clean_class,
  not paragraph.isPublished() ? 'block--unpublished',
] %}
{% block paragraph %}
  <div id="slider" {{ attributes.addClass(classes) }} data-autoplay="2600" data-animate-in="fadeIn"
       data-animate-out="fadeOut" data-items="1" data-loop="true" data-autoplay="true">
    {% block content %}
      {% for key,slider in paragraph.field_slider_item %}
        {% set slditem = slider.entity %}
        {% set background_image = (slditem.field_image.target_id) ? file_url(slditem.field_image.entity.uri.value) : '' %}
        <div class="slide background-image" style="background-image:url('{{ background_image }}');">
          <div class="zzz-bgdr-overlay"></div>
          <div class="container">
            <div class="slide-captions text-center">
              {% if slditem.field_subtitle.value  is not empty %}
                <h1 class="text-light slider-stitle">{{ slditem.field_subtitle.value }}</h1>
              {% endif %}

              {% if slditem.field_block_title.value  is not empty %}
                <h2 class="text-uppercase slider-title text-light">{{ slditem.field_block_title.value }}</h2>
              {% endif %}

              {% if slditem.field_description.value  is not empty %}
                <div class="slider-desc">{{ slditem.field_description.value|raw }}</div>
              {% endif %}

              {% if slditem.field_button  is not empty %}
                <div class="slider-link">{{ content.field_button }}</div>
              {% endif %}

            </div>
          </div>
        </div>
      {% endfor %}
    {% endblock %}
  </div>
{% endblock paragraph %}