{if $content_images}
<div class="carousel-outer-wrap">
    <div class="teaser owl">
        <div class="pictureCarousel-{$id}">
            {foreach name=images item=image key=key from=$content_images}
            {if $image.file}
            {if $image.link}<a href="{$image.link}">{/if}
            <div class="image image-{$key}">
                <div class="xtlive-carousel-titel">
                    {if $image.name}
                    <h2 class="xtlive-carousel-titel-big"><span>{$image.name}</span></h2>
                    {/if}
                    {if $image.text}
                    <p class="xtlive-carousel-titel-small"><span>{$image.text|strip_tags}</span></p>
                    {/if}
                </div>
                {picture img=$image.file lg=m_elements_1170x md=m_elements_970x sm=m_elements_750x xs=m_elements_750x xxs=m_elements_375x alt=$image.name class="lazyOwl"}
            </div>
            {if $image.link}</a>{/if}
            {/if}
            {/foreach}
        </div>
    </div>
</div>

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

</script>
{/if}