
{if $product_list}
<div class="xtlive-element editable">
    <div class="row">
        <div class="col-md-12">
            {include file="{$selected_template}../../plugins/xtlive_elements/templates/boxes/box_product-slider.demo.html" type="tpl_include" product_listing=$product_list heading_text=''}
            {*{include file="{$selected_template}/xtCore/pages/product_listing/product_listing_slider.html" type="tpl_include" product_listing=$product_list heading_text=''}*}
        </div>
    </div>
</div>
{else}
{* render demo markup *}
<div class="xtlive-element">
    <div class="row">
        <div class="col-md-12">
            <h2>Ich bin ein flexibler Produktslider</h2>
            <p class="lead">Du kannst mich einbauen, wo du willst und sooft du willst, ich kann alles anzeigen lassen, was du willst - ich bin so flexibel wie XTLIVE! Erstelle eigene Produktseiten und lass nur genau die Produkte anzeigen, die du willst - so kannst du gezielt Produkte bewerben und leichter verkaufen.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="product-listing product-slider carousel-outer-wrap ">
                <div id="slider-{$id}" class="slider">
                    {*<div class="hover-list-badge">
                        <a href="{xtlivedemolink}"><img src="{$tpl_path}../../images/demo/xtlive-demo.svg" alt=""></a>
                    </div>*}
                    <div class="listing equalize-no-panels owl">
                        <div id="productCarousel-{$id}" class="productCarousel">
                            <div class="col col-1 col-first">
                                <div class="section panel panel-default">
                                    <div class="section-body panel-body">
                                        <p class="image text-center">
                                            <a href="{xtlivedemolink}" class="vertical-helper image-link">
                                                <img alt="Peach Floral Print Shift Dress" class="img-responsive lazyOwl" src="{$tpl_path}../../images/demo/hover_demo-1.jpg" data-src="{$tpl_path}../../images/demo/hover_demo-1.jpg">
                                            </a>
                                        </p>
                                        <div class="title">
                                            <p class="h4"><a href="{xtlivedemolink}">Peach Floral Print Shift Dress</a></p>
                                            <p class="desc desc-short text-middle hidden-xs"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ante diam,...</p>
                                        </div>
                                        <div class="product-reviews cursor-pointer" data-toggle="popover" data-placement="bottom" data-content="ZU DIESEM ARTIKEL EXISTIEREN NOCH KEINE BEWERTUNGEN">
                                            <div class="reviews_rating_light">
                                                <i></i><i></i><i></i><i></i><i></i>
                                                <div class="reviews_rating_dark" style="width:1%">
                                                    <i></i><i></i><i></i><i></i><i></i>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="product-price"><span class="price-tag">EUR  10,70 </span></p>
                                        <p class="product-tax-shipping">inkl. 7 % USt <a href="{xtlivedemolink}">ZZGL. VERSANDKOSTEN</a></p>
                                    </div>
                                    <footer class="section-footer">
                                        <form name="product158" action="#" method="post">
                                            <div class="clearfix footer-buttons">
                                                <a href="{xtlivedemolink}" class="btn btn-sm btn-default pull-left" role="button">
                                                    MEHR...
                                                </a>
                                                <button type="submit" class="btn btn-sm btn-cart pull-right" title="IN DEN WARENKORB" data-toggle="tooltip">
                                                    <i class="fa fa-shopping-basket"></i>
                                                    <span class="sr-only">IN DEN WARENKORB</span>
                                                </button>
                                            </div>
                                        </form>
                                    </footer>
                                    <div class="product-info-label pos-slider">
                                    </div>
                                </div>
                            </div>
                            <!-- .col -->
                            <div class="col col-2">
                                <div class="section panel panel-default">
                                    <div class="section-body panel-body">
                                        <p class="image text-center">
                                            <a href="{xtlivedemolink}" class="vertical-helper image-link">
                                                <img alt="Contrast Floral A-Line Dress" class="img-responsive lazyOwl" src="{$tpl_path}../../images/demo/hover_demo-2.jpg" data-src="{$tpl_path}../../images/demo/hover_demo-2.jpg">
                                            </a>
                                        </p>
                                        <div class="title">
                                            <p class="h4"><a href="{xtlivedemolink}">Contrast Floral A-Line Dress</a></p>
                                            <p class="desc desc-short text-middle hidden-xs"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ante diam,...</p>
                                        </div>
                                        <div class="product-reviews cursor-pointer" data-toggle="popover" data-placement="bottom" data-content="ZU DIESEM ARTIKEL EXISTIEREN NOCH KEINE BEWERTUNGEN">
                                            <div class="reviews_rating_light">
                                                <i></i><i></i><i></i><i></i><i></i>
                                                <div class="reviews_rating_dark" style="width:1%">
                                                    <i></i><i></i><i></i><i></i><i></i>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="product-price"><span class="price-tag">EUR  14,00 </span></p>
                                        <p class="product-tax-shipping">inkl. 19 % USt <a href="{xtlivedemolink}">ZZGL. VERSANDKOSTEN</a></p>
                                    </div>
                                    <footer class="section-footer">
                                        <form name="product242" action="#" method="post">
                                            <div class="clearfix footer-buttons">
                                                <a href="{xtlivedemolink}" class="btn btn-sm btn-default pull-left" role="button">
                                                    MEHR...
                                                </a>
                                                <button type="submit" class="btn btn-sm btn-cart pull-right" title="IN DEN WARENKORB" data-toggle="tooltip">
                                                    <i class="fa fa-shopping-basket"></i>
                                                    <span class="sr-only">IN DEN WARENKORB</span>
                                                </button>
                                            </div>
                                        </form>
                                    </footer>
                                    <div class="product-info-label pos-slider">
                                    </div>
                                </div>
                            </div>
                            <!-- .col -->
                            <div class="col col-3">
                                <div class="section panel panel-default">
                                    <div class="section-body panel-body">
                                        <p class="image text-center">
                                            <a href="{xtlivedemolink}" class="vertical-helper image-link">
                                                <img alt="Collard Floral Skater Dress" class="img-responsive lazyOwl" src="{$tpl_path}../../images/demo/hover_demo-xtlive.jpg" data-src="{$tpl_path}../../images/demo/hover_demo-xtlive.jpg">
                                            </a>
                                        </p>
                                        <div class="title">
                                            <p class="h4"><a href="{xtlivedemolink}">Collard Floral Skater Dress</a></p>
                                            <p class="desc desc-short text-middle hidden-xs"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus pulvinar...</p>
                                        </div>
                                        <div class="product-reviews cursor-pointer" data-toggle="popover" data-placement="bottom" data-content="ZU DIESEM ARTIKEL EXISTIEREN NOCH KEINE BEWERTUNGEN">
                                            <div class="reviews_rating_light">
                                                <i></i><i></i><i></i><i></i><i></i>
                                                <div class="reviews_rating_dark" style="width:1%">
                                                    <i></i><i></i><i></i><i></i><i></i>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="product-price"><span class="price-tag">EUR  76,00 </span></p>
                                        <p class="product-tax-shipping">inkl. 19 % USt <a href="{xtlivedemolink}">ZZGL. VERSANDKOSTEN</a></p>
                                    </div>
                                    <footer class="section-footer">
                                        <form name="product107" action="#" method="post">
                                            <div class="clearfix footer-buttons">
                                                <a href="{xtlivedemolink}" class="btn btn-sm btn-default pull-left" role="button">
                                                    MEHR...
                                                </a>
                                                <button type="submit" class="btn btn-sm btn-cart pull-right" title="IN DEN WARENKORB" data-toggle="tooltip">
                                                    <i class="fa fa-shopping-basket"></i>
                                                    <span class="sr-only">IN DEN WARENKORB</span>
                                                </button>
                                            </div>
                                        </form>
                                    </footer>
                                    <div class="product-info-label pos-slider">
                                    </div>
                                </div>
                            </div>
                            <!-- .col -->
                            <div class="col col-4">
                                <div class="section panel panel-default">
                                    <div class="section-body panel-body">
                                        <p class="image text-center">
                                            <a href="{xtlivedemolink}" class="vertical-helper image-link">
                                                <img alt="United Kingdom Flag Handbag" class="img-responsive lazyOwl" src="{$tpl_path}../../images/demo/hover_demo-4.jpg" data-src="{$tpl_path}../../images/demo/hover_demo-4.jpg">
                                            </a>
                                        </p>
                                        <div class="title">
                                            <p class="h4"><a href="{xtlivedemolink}">United Kingdom Flag Handbag</a></p>
                                            <p class="desc desc-short text-middle hidden-xs"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus pulvinar...</p>
                                        </div>
                                        <div class="product-reviews cursor-pointer" data-toggle="popover" data-placement="bottom" data-content="ZU DIESEM ARTIKEL EXISTIEREN NOCH KEINE BEWERTUNGEN">
                                            <div class="reviews_rating_light">
                                                <i></i><i></i><i></i><i></i><i></i>
                                                <div class="reviews_rating_dark" style="width:1%">
                                                    <i></i><i></i><i></i><i></i><i></i>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="product-price"><span class="price-tag">EUR  29,00 </span></p>
                                        <p class="product-tax-shipping">inkl. 19 % USt <a href="{xtlivedemolink}">ZZGL. VERSANDKOSTEN</a></p>
                                    </div>
                                    <footer class="section-footer">
                                        <form name="product9" action="#" method="post">
                                            <div class="clearfix footer-buttons">
                                                <a href="{xtlivedemolink}" class="btn btn-sm btn-default pull-left" role="button">
                                                    MEHR...
                                                </a>
                                                <button type="submit" class="btn btn-sm btn-cart pull-right" title="IN DEN WARENKORB" data-toggle="tooltip">
                                                    <i class="fa fa-shopping-basket"></i>
                                                    <span class="sr-only">IN DEN WARENKORB</span>
                                                </button>
                                            </div>
                                        </form>
                                    </footer>
                                    <div class="product-info-label pos-slider">
                                    </div>
                                </div>
                            </div>
                            <!-- .col -->
                            <div class="col col-5">
                                <div class="section panel panel-default">
                                    <div class="section-body panel-body">
                                        <p class="image text-center">
                                            <a href="{xtlivedemolink}" class="vertical-helper image-link">
                                                <img alt="Aviator Sunglasses" class="img-responsive lazyOwl" src="{$tpl_path}../../images/demo/hover_demo-5.jpg" data-src="{$tpl_path}../../images/demo/hover_demo-5.jpg">
                                            </a>
                                        </p>
                                        <div class="title">
                                            <p class="h4"><a href="{xtlivedemolink}">Aviator Sunglasses</a></p>
                                            <p class="desc desc-short text-middle hidden-xs"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus pulvinar...</p>
                                        </div>
                                        <div class="product-reviews cursor-pointer" data-toggle="popover" data-placement="bottom" data-content="ZU DIESEM ARTIKEL EXISTIEREN NOCH KEINE BEWERTUNGEN">
                                            <div class="reviews_rating_light">
                                                <i></i><i></i><i></i><i></i><i></i>
                                                <div class="reviews_rating_dark" style="width:1%">
                                                    <i></i><i></i><i></i><i></i><i></i>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="product-price"><span class="price-tag">EUR  67,00 </span></p>
                                        <p class="product-tax-shipping">inkl. 19 % USt <a href="{xtlivedemolink}">ZZGL. VERSANDKOSTEN</a></p>
                                    </div>
                                    <footer class="section-footer">
                                        <form name="product247" action="" method="post">
                                            <div class="clearfix footer-buttons">
                                                <a href="{xtlivedemolink}" class="btn btn-sm btn-default pull-left" role="button">
                                                    MEHR...
                                                </a>
                                                <button type="submit" class="btn btn-sm btn-cart pull-right" title="IN DEN WARENKORB" data-toggle="tooltip">
                                                    <i class="fa fa-shopping-basket"></i>
                                                    <span class="sr-only">IN DEN WARENKORB</span>
                                                </button>
                                            </div>
                                        </form>
                                    </footer>
                                    <div class="product-info-label pos-slider">
                                    </div>
                                </div>
                            </div>
                            <!-- .col -->
                            <div class="col col-6">
                                <div class="section panel panel-default">
                                    <div class="section-body panel-body">
                                        <p class="image text-center">
                                            <a href="{xtlivedemolink}" class="vertical-helper image-link">
                                                <img alt="Plunge Floral Wide Leg Jumpsuit" class="img-responsive lazyOwl" src="{$tpl_path}../../images/demo/hover_demo-xtlive-2.jpg" data-src="{$tpl_path}../../images/demo/hover_demo-xtlive-2.jpg">
                                            </a>
                                        </p>
                                        <div class="title">
                                            <p class="h4"><a href="{xtlivedemolink}">Plunge Floral Wide Leg Jumpsuit</a></p>
                                            <p class="desc desc-short text-middle hidden-xs"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus pulvinar...</p>
                                        </div>
                                        <div class="product-reviews cursor-pointer" data-toggle="popover" data-placement="bottom" data-content="ZU DIESEM ARTIKEL EXISTIEREN NOCH KEINE BEWERTUNGEN">
                                            <div class="reviews_rating_light">
                                                <i></i><i></i><i></i><i></i><i></i>
                                                <div class="reviews_rating_dark" style="width:1%">
                                                    <i></i><i></i><i></i><i></i><i></i>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="product-price"><span class="price-tag">EUR  9,00 </span></p>
                                        <p class="product-tax-shipping">inkl. 19 % USt <a href="{xtlivedemolink}">ZZGL. VERSANDKOSTEN</a></p>
                                    </div>
                                    <footer class="section-footer">
                                        <form name="product141" action="#" method="post">
                                            <div class="clearfix footer-buttons">
                                                <a href="{xtlivedemolink}" class="btn btn-sm btn-default pull-left" role="button">
                                                    MEHR...
                                                </a>
                                                <button type="submit" class="btn btn-sm btn-cart pull-right" title="IN DEN WARENKORB" data-toggle="tooltip">
                                                    <i class="fa fa-shopping-basket"></i>
                                                    <span class="sr-only">IN DEN WARENKORB</span>
                                                </button>
                                            </div>
                                        </form>
                                    </footer>
                                    <div class="product-info-label pos-slider">
                                    </div>
                                </div>
                            </div>
                            <!-- .col -->
                            <div class="col col-7">
                                <div class="section panel panel-default">
                                    <div class="section-body panel-body">
                                        <p class="image text-center">
                                            <a href="{xtlivedemolink}" class="vertical-helper image-link">
                                                <img alt="Floral Wide Leg Jumpsuit" class="img-responsive lazyOwl" src="{$tpl_path}../../images/demo/hover_demo-7.jpg" data-src="{$tpl_path}../../images/demo/hover_demo-6.jpg">
                                            </a>
                                        </p>
                                        <div class="title">
                                            <p class="h4"><a href="{xtlivedemolink}">Floral Wide Leg Jumpsuit</a></p>
                                            <p class="desc desc-short text-middle hidden-xs"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus pulvinar...</p>
                                        </div>
                                        <div class="product-reviews cursor-pointer" data-toggle="popover" data-placement="bottom" data-content="ZU DIESEM ARTIKEL EXISTIEREN NOCH KEINE BEWERTUNGEN">
                                            <div class="reviews_rating_light">
                                                <i></i><i></i><i></i><i></i><i></i>
                                                <div class="reviews_rating_dark" style="width:1%">
                                                    <i></i><i></i><i></i><i></i><i></i>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="product-price"><span class="price-tag">EUR  29,00 </span></p>
                                        <p class="product-tax-shipping">inkl. 19 % USt <a href="{xtlivedemolink}">ZZGL. VERSANDKOSTEN</a></p>
                                    </div>
                                    <footer class="section-footer">
                                        <form name="product66" action="#" method="post">
                                            <div class="clearfix footer-buttons">
                                                <a href="{xtlivedemolink}" class="btn btn-sm btn-default pull-left" role="button">
                                                    MEHR...
                                                </a>
                                                <button type="submit" class="btn btn-sm btn-cart pull-right" title="IN DEN WARENKORB" data-toggle="tooltip">
                                                    <i class="fa fa-shopping-basket"></i>
                                                    <span class="sr-only">IN DEN WARENKORB</span>
                                                </button>
                                            </div>
                                        </form>
                                    </footer>
                                    <div class="product-info-label pos-slider">
                                    </div>
                                </div>
                            </div>
                            <!-- .col -->
                            <div class="col col-8 col-last">
                                <div class="section panel panel-default">
                                    <div class="section-body panel-body">
                                        <p class="image text-center">
                                            <a href="{xtlivedemolink}" class="vertical-helper image-link">
                                                <img alt="Bow Back Contrast Hat" class="img-responsive lazyOwl" src="{$tpl_path}../../images/demo/hover_demo-8.jpg" data-src="{$tpl_path}../../images/demo/hover_demo-7.jpg">
                                            </a>
                                        </p>
                                        <div class="title">
                                            <p class="h4"><a href="{xtlivedemolink}">Bow Back Contrast Hat</a></p>
                                            <p class="desc desc-short text-middle hidden-xs"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus pulvinar...</p>
                                        </div>
                                        <div class="product-reviews cursor-pointer" data-toggle="popover" data-placement="bottom" data-content="ZU DIESEM ARTIKEL EXISTIEREN NOCH KEINE BEWERTUNGEN">
                                            <div class="reviews_rating_light">
                                                <i></i><i></i><i></i><i></i><i></i>
                                                <div class="reviews_rating_dark" style="width:1%">
                                                    <i></i><i></i><i></i><i></i><i></i>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="product-price"><span class="price-tag">EUR  39,00 </span></p>
                                        <p class="product-tax-shipping">inkl. 19 % USt <a href="{xtlivedemolink}">ZZGL. VERSANDKOSTEN</a></p>
                                    </div>
                                    <footer class="section-footer">
                                        <form name="product156" action="#" method="post">
                                            <div class="clearfix footer-buttons">
                                                <a href="{xtlivedemolink}" class="btn btn-sm btn-default pull-left" role="button">
                                                    MEHR...
                                                </a>
                                                <button type="submit" class="btn btn-sm btn-cart pull-right" title="IN DEN WARENKORB" data-toggle="tooltip">
                                                    <i class="fa fa-shopping-basket"></i>
                                                    <span class="sr-only">IN DEN WARENKORB</span>
                                                </button>
                                            </div>
                                        </form>
                                    </footer>
                                    <div class="product-info-label pos-slider">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{/if}