SiteServer/sscms 首页产品版块排版及代码

排版样式一：
Html 结构代码：

    <section class="products">
        <div class="productTop">
                <div class="proTitle">产品展示<span>PRODUCT DISPLAY</span></div>
        </div>
        <div id="productsBox" class="swiper-container">
            <ul class="swiper-wrapper">
                <stl:contents channelIndex="产品展示" totalNum="30" scope="all" order="AddDate">
                    <li class="swiper-slide tempImage_{content.item-1}">
                        <div class="wrap">
                            <stl:a>
                                <div class="pic">
                                    <img src="{content.ImageUrl}" alt="{content.Title}">
                                </div>
                                <div class="proText">
                                    <h3>{stl:content type='Title' wordNum="8" }</h3>
                                </div>
                            </stl:a>
                        </div>
                    </li>
                </stl:contents>
            </ul>
        </div>
 	</section>

CSS 样式代码：

/* 首页产品展示版块 */
.products{
    background:#ffffff;
    padding:100px 0px 40px;
}
.products .productTop{
    position:relative;
    width:1200px;
    margin:0 auto;
    border-bottom:1px solid #f3f3f3;
    padding-bottom: 18px;
    margin-bottom: 70px;
}
.products .productTop .proTitle{
    position: relative;
    font-size: 24px;
    color:#333;
}
.products .productTop .proTitle span{
    display: block;
    color:#bfbfbf;
    font-size: 12px;
    padding-left:60px;
    font-family: Source Han Sans;
}
.products .productTop .proTitle:after{
    content:"";
    display: block;
    position:absolute;
    left:0;
    bottom:5px;
    width:46px;
    height: 4px;
    background:#1274ce;
}
#productsBox{
    width:1200px;
}
#productsBox li .wrap{
    width:100%;
    box-sizing: border-box;
}
#productsBox li .proText h3{
    font-size: 14px;
    color:#444;
    font-weight: normal;
    text-align: center;
    margin-top:8px;
    height:48px;
    line-height: 48px;
}
#productsBox li .pic{
    width:100%;
    border:1px solid #efefef;
    line-height: 0;
}
/* /首页产品版块结束 */

Javascris 代码(需要配合 Swiper插件 使用):

            var mySwiper = new Swiper('#productsBox', {
                loop: true,
                slidesPerView: 4,
                spaceBetween: 24,
                breakpoints: { 
                    320: {  //当屏幕宽度大于等于320
                    slidesPerView: 1,
                    spaceBetween: 0,
                    },
                    768: {  //当屏幕宽度大于等于768 
                    slidesPerView: 1,
                    spaceBetween: 0,
                    },
                    1280: {  //当屏幕宽度大于等于1280
                    slidesPerView: 4,
                    spaceBetween: 24,
                    }
                }
            });