{% load styling_tags ocyan_thumbnail thumbnail %}
<div class="roadrunner-slider" id="slider-{{block_key}}-{{blockid}}" data-behaviour="tinyslider" data-items="{{self.items}}" data-slide-by="{{ self.slideby }}" data-controls="{{self.controls|lower}}" data-autoplay-timeout="{{self.autoplaytimeout}}" data-loop="{{self.loop|lower}}" data-nav="{{self.nav|lower}}" data-auto-height="{{self.autoheight|lower}}" data-autoplay="{{self.autoplay|lower}}">
    {% for slide in self.slides %}
    <div class="slider-item {% if forloop.first %}tns-slide-active{% endif %} {% get_styling_classes slide.styling %}">
        <div class="image-wrapper {% if self.fixed_height %}{{ self.fixed_height }}{% else %}og-height{% endif %}">
        {% if slide.image %}
        {% if forloop.first and not self.lazy %}
        {% focuspoint_picture slide.image classes="tns-lazy-img loaded tns-complete" %}
        {% else %}
        {% lazy_tns_focuspoint_picture slide.image %}
        {% endif %}
        {% endif %}
        </div>
        <div class="slider-body pos-{{ slide.position }}" {% get_styling self.styling %}>
            <div class="container">
                <div class="row">
                    <div class="col-lg-5 slider-body-inner">
                        {{ slide.body }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>