{% if result|length > 0 %}
    <div id="slider1_container" style="position: relative; width: 1170px;
         height: 364px; overflow: hidden;">
        <!-- Loading Screen -->
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                 background-color: #000; top: 0px; left: 0px;width: 100%; height:100%;">
            </div>
            <div style="position: absolute; display: block; background: url({{ asset('bundles/officebrainpage/images/img/loading.gif') }}) no-repeat center center;
                 top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
        </div>
        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1170px; height: 364px; overflow: hidden;">
            
            <div>
                {% if ((banner_img is defined) and (banner_img != '')) %}
                    <img u="image" src="{{banner_img}}" class="js-banner-img">
                {% else %}
                    <img style="display:none;" src="" class="js-banner-img">
                {% endif %}
                {% for bannerCaption in result%}
                    <div class="banner-title{{bannerCaption.i}} js-preview-caption{{bannerCaption.i}}" id="banner-preview-title1" u=caption t="{{bannerCaption.t}}" style="{{bannerCaption.style}}">
                        {{bannerCaption.html|raw}}
                    </div>
                {% endfor%}
            </div>
            <div>
                {% if ((banner_img is defined) and (banner_img != '')) %}
                    <img u="image" src="{{banner_img}}" class="js-banner-img">
                {% else %}
                    <img style="display:none;" src="" class="js-banner-img">
                {% endif %}
                {% for bannerCaption in result%}
                    <div class="banner-title{{bannerCaption.i}} js-preview-caption{{bannerCaption.i}}" id="banner-preview-title1" u=caption t="{{bannerCaption.t}}" style="{{bannerCaption.style}}">
                        {{bannerCaption.html|raw}}
                    </div>
                {% endfor%}
            </div>
        </div>
        <!-- Arrow Left -->
        <span u="arrowleft" class="jssora20l" style="top: 123px; left: 8px;">
        </span>
        <!-- Arrow Right -->
        <span u="arrowright" class="jssora20r" style="top: 123px; right: 8px;">
        </span>
        <!--#endregion Arrow Navigator Skin End -->
    </div>
{% endif %}