{php}
$bannerList = $detail['banner'];
{/php}
<!--  banner  -->
{if !empty($bannerList)}
<div class="banner">
    <div class="banner1" style="position:relative; padding-bottom:39.0625%; height:0px; overflow:hidden;">
        <div class="slider" style=" position:absolute; width:100%; height:100%; left:0px; top:0px;">

            {foreach $bannerList as $bannerItem}
            <div class="item">
                {if !empty($bannerItem['video_url'])}
                    {if $bannerItem['video_type'] == 1}
                        <iframe frameborder="0" src="{$bannerItem['video_url']}"
                                allowFullScreen="true" width="100%" height="100%"></iframe>
                    {elseif $bannerItem['video_type'] == 2 /}
                        <video class="box-video" autoplay src="{$bannerItem['video_url']}" loop muted="" playsinline=""></video>
                    {/if}
                {else/}
                    <a {if !empty($bannerItem['thumb_url'])} href="{$bannerItem.thumb_url}" {/if}>
                        <img class="pic" fetchpriority="high" src="{$bannerItem.pc_thumb|imgwhwebp=1920,750}"
                             title="{$bannerItem.pc_alt|default=''}"
                             alt="{$bannerItem.pc_alt|default=''}">
                    </a>
                {/if}
            </div>
            {/foreach}

        </div>
    </div>
</div>
<script src="__STATIC_DEMO__/js/slide.js"></script>
<script type="text/javascript">
    $(function () {
        $(".slider").slick({
            autoplay: true,
            autoplaySpeed: 2000,
            draggable: true,
            arrows: true,
            dots: true,
            fade: true,
            speed: 900,
            infinite: true,
            cssEase: "cubic-bezier(0.7, 0, 0.3, 1)",
            touchThreshold: 100
        })
    });
</script>
{/if}