<div class="banner7">
	<div class= "oc-banner7-container">
		<div class="flexslider oc-nivoslider">
			<div class="oc-loading"></div>
			<div id="oc-inivoslider1" class="nivoSlider">

                {% set config = slide_setting[0] %}
                {% set i=1 %}
                {% for s in ocslideshows %}
                    {% set i=i+1 %}
					<img style="display: none;" src="{{ s['image'] }}" alt="" title="#banner7-caption{{ i }}"  />
                {% endfor %}

			</div>

            {% set i=1 %}
            {% for s in ocslideshows %}
			
				{% set class = "" %}
				{% if s['type'] == 1 %}
					{% set class = 'slider-1' %}
				{% endif %}
				
				{% if s['type'] == 2 %}
					{% set class = 'slider-2' %}
				{% endif %}
				
				{% if s['type'] == 3 %}
					{% set class = 'slider-3' %}
				{% endif %}
				
                {% set i=i+1 %}
				<div id="banner7-caption{{ i }}" class="banner7-caption nivo-html-caption nivo-caption move-slides-effect" data-class="slide-movetype{{ s['type'] }}">
					<div class="timeloading"></div>
					<div class="banner7-content {{ class }}">
						<div class="text-content">							
							{%  if s['title'] and s['title'] != ""  %}
								<h1 class="title1">{{ s['title'] }}</h1>
							{% endif %}														
							{%  if s['sub_title'] and s['sub_title'] != "" %}
								<h2 class="sub-title">{{ s['sub_title'] }}</h2>
							{% endif %}							
							<div class="banner7-des">
								{{ s['description'] }}
							</div>
							{% if s['link'] %}
								<div class="banner7-readmore">
									<a class="btn" href="{{ s['link'] }}" title="{{ text_readmore }}">{{ text_readmore }}</a>
								</div>
							{% endif %}
						</div>
					</div>
				</div>
            {% endfor %}
			<script type="text/javascript">
                $(window).load(function() {
                    $('#oc-inivoslider1').nivoSlider({
                        effect:  {% if config['effect'] %}  "{{ config['effect'] | trim }}" {% else %}   'random'  {% endif %} ,
                        slices: 15,
                        boxCols: 8,
                        boxRows: 4,
                        manualAdvance: {% if config['auto'] and config['auto'] == 1 %} false {% else %}   true  {% endif %} ,
                        animSpeed: 500,
                        pauseTime: {% if config['delay'] %}  {{ config['delay'] }} {% else %}   3000  {% endif %} ,
                        startSlide: 0,
                        controlNav:  {% if config['contrl'] and config['contrl'] == 1 %} true {% else %}   false  {% endif %} ,
                        directionNav:  {% if config['nextback'] and config['nextback'] == 1 %} true {% else %}   false  {% endif %} ,
                        controlNavThumbs: false,
                        pauseOnHover:  {% if config['hover'] and config['hover'] == 1 %} true {% else %}   false  {% endif %} ,
                        prevText: '<i class="ion-chevron-left"></i>',
						nextText: '<i class="ion-chevron-right"></i>',
						afterLoad: function(){
							$('.oc-loading').css("display","none");
							$('.timeloading').css('animation-duration',"{% if config['delay'] %} {{ config['delay']~'ms' }} {% else %} 3000 {% endif %}");
						},						
                    });
                });
			</script>
		</div>
	</div>
</div>