<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="container 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>