{block name=boxes_boxTeaser}
    {if $data}
        <div class="carousel-outer-wrap">
            <div class="{$params.name} picture-slider owl">
                <div class=pictureCarousel-{$data.slider_id}>
                    {foreach key=key item=item from=$data.slides}
                        {if $item.slide_image}
                            <div class="image image-{$key}">
                                {if $item.slide_link}<a href="{$item.slide_link}">{/if}
                                    <img alt="{$item.slide_alt_text|escape:'html'}" class="img-responsive lazyOwl" src="{img img=$item.slide_image type=m_org path_only=true}" data-src="{img img=$item.slide_image type=m_org path_only=true}">
                                {if $item.slide_link}</a>{/if}
                            </div>
                        {/if}
                    {/foreach}
                </div>
            </div>
        </div>

        {block name=boxes_boxTeaser_jsInitCarousel}
            <script type="text/javascript">
                jQuery(document).ready(function () {
                    var teaserElement = jQuery('.pictureCarousel-{$data.slider_id}');
                    if (teaserElement.length != 0) {
                        teaserElement.owlCarousel({
                            singleItem: true,
                            navigation: true,
                            pagination: false,
                            slideSpeed: {$data.slide_speed},
                            paginationSpeed: {$data.pagination_speed},
                            scrollPerPage: true,
                            autoPlay: {$data.auto_play_speed},
                            stopOnHover: true,
                            autoHeight: true,
                            lazyLoad: false,
                            addClassActive: true,
                            navigationText: ['', '']
                        });
                    }
                });
            </script>
        {/block}
    {/if}
{/block}