<link href="{$template_path}/visual/modules/common/scroll-columns-list/css/style.css" rel="stylesheet">

<div class="s2">
    <div class="swiper-container swiper2">
        <div class="swiper-wrapper">
            <div class="swiper-slide s2-item">
                <div class="s2-img">
                    <a href="#">
                        <img src="{$template_path}/visual/modules/common/scroll-columns-list/images/1.jpg" />
                    </a>
                </div>
                <div class="s2-text">
                    <h4>
                        <a title="{$cat['catname']}" href="{$cat['url']}" target="_blank">
                            <span>
                INDUSTRY
            </span>
                            <strong>
                                栏目名称
                            </strong>
                        </a>
                    </h4>
                    <span class="s2-text-subtitle">
                        栏目副标题
                    </span>
                    <div class="s2-text-p cmseasyedit content">
                        栏目说明文字。。。
                    </div>
                    <a class="more">
                        了解更多
                    </a>
                </div>
            </div>
            <div class="swiper-slide s2-item">
                <div class="s2-img">
                    <a href="#">
                        <img src="{$template_path}/visual/modules/common/scroll-columns-list/images/2.jpg" />
                    </a>
                </div>
                <div class="s2-text">
                    <h4>
                        <a title="{$cat['catname']}" href="{$cat['url']}" target="_blank">
                            <span>
                INDUSTRY
            </span>
                            <strong>
                                栏目名称
                            </strong>
                        </a>
                    </h4>
                    <span class="s2-text-subtitle">
                        栏目副标题
                    </span>
                    <div class="s2-text-p cmseasyedit content">
                        栏目说明文字。。。
                    </div>
                    <a class="more">
                        了解更多
                    </a>
                </div>
            </div>
        </div>
        <div class="swiper-pagination swiper2-pagination"></div>
    </div>
</div>
<script src="{$template_path}/visual/modules/common/scroll-columns-list/js/scroll-columns-list.js" type="text/javascript"></script>

<style type="text/css">
    .swiper2 .s2-item .s2-text h4 a {
        font-size:26px;
        color:#333333;
    }
    .swiper2 .s2-item .s2-text h4 a:hover {
        color:#000000;
    }
    .swiper2 .s2-item .s2-text-p {
        font-size:14px;
        color:#555555;
    }
    .swiper2 .s2-item .s2-text-p:hover {
        color:#555555;
    }
    .swiper2 .s2-item .s2-text {
        border:$_border
    }
    .swiper2 .s2-item .s2-text .more {
        font-size:14px;
        color:#ffffff;
        border-color:#06276a;
        border-radius: 50px;
        background-color:#06276a ;
    }
    .swiper2 .s2-item .s2-text .more:hover,.swiper2 .s1-item-2:hover .s2-text .more  {
        color:#ffffff;
        border-color:#06276a;
        background-color:#06276a;
    }

</style>
