{php}
$pageConfig = [
'is_page' => 2,
'list_rows' => 8
];
$where = [
['is_hot', '=', 1]
];
$hotProductList = siteGetList(modelId:1, pageConfig:$pageConfig, where:$where);
{/php}
{if !empty($hotProductList)}
<div class="hotProduct">
    <div class="title">
        <div class="lTit">
            {:lang('zg_hot_products')}
        </div>
        <div class="sbtns">
            <div class="sbtn prev iconfont icon-zuosanjiao">

            </div>
            <div class="sbtn next iconfont icon-yousanjiao-copy">

            </div>
        </div>
    </div>
    <div class="swiper">
        <div class="swiper-wrapper">
            {foreach $hotProductList as $item}
            <div class="swiper-slide productItem">
                <div class="name">
                    <a href="{$item.url|default=''}" class="twoRow" title="{$item.name|default=''}">
                        {$item.name|default=''}
                    </a>
                </div>
                <a href="{$item.url|default=''}" class="image" title="{$item.name|default=''}">
                    <img src="{$item.thumb|default=''|imgwhwebp=272,272}" alt="{$item.name|default=''}">
                </a>
                <a href="{$item.url|default=''}" class="cBtn">{:lang('zg_read_more')} <i class="iconfont icon-yousanjiao-copy"></i></a>
            </div>
            {/foreach}
        </div>
    </div>
</div>
<script>
    var mySwiper = new Swiper('.hotProduct .swiper', {
        speed: 1000,
        watchSlidesProgress: true,
        watchSlidesVisibility: true,
        breakpoints: {
            0: {
                slidesPerView: 2,
                spaceBetween: 20
            },
            539: {
                slidesPerView: 3,
                spaceBetween: 20
            },
            769: {
                slidesPerView: 3,
                spaceBetween: 30
            },
            1000: {
                slidesPerView: 4,
                spaceBetween: 20
            },
            1334: {
                slidesPerView: 4,
                spaceBetween: 26
            }
        },
        navigation: {
            nextEl: '.hotProduct .next',
            prevEl: '.hotProduct .prev',
        }
    })
</script>
{/if}