{% block search_keyword_banner %}
    <!--Slider Section Start-->
    <!-- Jssor Slider Begin -->
    <!-- To move inline styles to css file/block, please specify a class name for each element. -->
     
    {% if banner_list|length > 0 %}
    	  
	    <div id="slider1_container" style="position: relative; width: 870px;
	        height: 145px; 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: 870px; height: 145px; overflow: hidden;">
	        	{% for key, value in banner_list %}
	            	<div>
	                {% if value.bannerUrl|length > 0 %} <a target="_blank" href="{{ value.bannerUrl}}"> {% endif %}
	                    <img height="{{ value.height }}" width="{{ value.width }}" alt="{{ value.altTags }}" title="{{ value.bannerTitle }}" u="image" src="{{ image_path ~ value.uploadedBanner }}" />
	                    {% if value.bannerUrl|length > 0 %} </a> {% endif %}
	                    {% if(value.bannerHtml1 is defined and value.bannerHtml1|length > 0) %}
	                    <div u=caption t="CLIP|LR" du="1500" class="captionOrange"  style="position:absolute; left:20px; top: 10px; width:300px; height:20px;">
	                        {{ value.bannerHtml1|raw }}
	                    </div>
	                    {% endif %}
	                    {% if(value.bannerHtml2 is defined and value.bannerHtml2|length > 0 ) %}
	                    <div u=caption t="L|IB" t2=L d=-900 class="captionBlack"  style="position:absolute; left:400px; top: 10px; width:400px; height:30px;">
	                         {{ value.bannerHtml2|raw }}
	                    </div>
	                    {% endif %}
	                    {% if(value.bannerHtml3 is defined and value.bannerHtml3|length > 0) %}
	                    <div u=caption t="DDGDANCE|RB" t2="RTT|10" d=-1800 du=3800 class="captionOrange" style="position:absolute; left:20px; top: 35px; width:300px; height:30px; text-align: left;">
	                        {{ value.bannerHtml3|raw }}
	                    </div>
	                    {% endif %}
	                    {% if(value.bannerHtml4 is defined and value.bannerHtml4|length > 0) %}
	                    <div u=caption t="T|IE*IE" d=-1600 du=3800 t2="B" class="captionOrange" style="position:absolute; left:20px; top: 80px; width:300px; height:30px;">
	                        {{ value.bannerHtml4|raw }}
	                    </div>
	                    {% endif %}
	                    {% if(value.bannerHtml5 is defined and value.bannerHtml5|length > 0) %}
	                    <!-- <div u="caption" t="ZMF|10" t2="B" d=-1300 style="position:absolute;left:420px;top:280px;width:90px;height:40px;color:#fff;line-height:40px;">390+</div>
	                    <div u="caption" t="CLIP|L" d=-300 style="position:absolute;left:520px;top:280px;width:160px;height:40px;color:#fff;line-height:40px; text-align: center;">caption</div> -->
	                    <!-- <a class="captionOrange" u="caption" t="CLIP|L" d=-300 href="#" style="position:absolute;left:720px;top:280px;width:220px;height:40px;color:#fff;line-height:40px;">transitions</a> -->
	                    <div u=caption t="L|IB" t2=L d=-900 class="captionBlack"  style="position:absolute; left:400px; top: 70px; width:400px; height:30px;">
	                        {{ value.bannerHtml5|raw }}
	                    </div>
	                    {% endif %}
	                                        
	                </div>
	            {% endfor %}
	         </div>
	         
	         <!-- bullet navigator container -->
	        <div u="navigator" class="jssorb03" style="bottom: 16px; right: 6px;">
	            <!-- bullet navigator item prototype -->
	            <div u="prototype"><div u="numbertemplate"></div></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 %}
  <!-- Jssor Slider End -->
  {% endblock search_keyword_banner %}