<link href="{$template_shop_path}/visual/modules/content/shopping-pics/css/style.css" rel="stylesheet">

<div class="col-md-12">
    <div class="shopping-pics shopping-pics-$_id">
        <div class="shopping-pics-big">
            {php $img_index=1}
            {if $archive['product_video']}
                {php $img_index=0}
                <div class="shopping-pics-big-item" style="display: block">
                    <video width="100%" height="100%" muted controls="controls" controlsList="nodownload" autoplay="autoplay">
                        <source src="{$archive['product_video']}" type="video/mp4">
                        <source src="movie.ogg" type="video/ogg">
                        您的浏览器不支持 video 标签。
                    </video>
                </div>
            {/if}
            {loop $archive['pics'] $i $pic}
            <div class="shopping-pics-big-item" style="display: {if $i==$img_index} block {else} none {/if}">
                <a>
                    <img data-imgurl="{$pic['url']}" src="{$pic['url']}" alt="{$pic['alt']}" />
                </a>
            </div>
            {/loop}
            {if $archive['product_video']}
            <button class="shopping-video-shop" type="button" value="播放视频" name="shopping-video-shop" style="display:none;" />
            <span class="badge">
        </span>
            </button>
            {/if}
        </div>
        <div class="shopping-pics-thumbs">
            {loop $archive['pics'] $i $pic}
            <div class="shopping-pics-small-item{if $archive['video_path']}{else}{if $i==1} active{/if}{/if}">
                <a>
                    <img src="{$pic['url']}" alt="{$pic['alt']}"data-imgurl="{$pic['url']}" />
                </a>
            </div>
            {/loop}
        </div>
        <div class="blank10"></div>
    </div>
</div>

<style type="text/css">
    .shopping-pics-$_id {
        background:$_background-color;
    }
    .shopping-pics-$_id:hover {
        background:$_background-hover-color;
    }
    .shopping-pics-$_id .shopping-pics-thumbs .shopping-pics-small-item {
        width: 20%;
    }
    .shopping-pics-$_id .shopping-pics-thumbs .shopping-pics-small-item.active,
    .shopping-pics-$_id .shopping-video-shop

    {
        border-color:$_background-border-hover-color;
    }

    .shopping-pics-$_id .shopping-video-shop .badge:before {
        border-color: transparent transparent transparent $_background-border-hover-color;
    }
</style>

<!-- 商品图片切换 -->
<script>
    //图片轮播切换
    var oldlightgallery=[];//保存的图片
    if (oldlightgallery.length==0){
        oldlightgallery[0]=$(".shopping-pics-$_id").html();
    }

    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        slidesPerView: $_slidesPerView,
        //loop: true,
        freeMode: true,
        loopedSlides: 5, //looped slides should be the same
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
    });
    var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 10,
        loop:true,
        loopedSlides: 5, //looped slides should be the same
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        thumbs: {
            swiper: galleryThumbs,
        },
    });
</script>




