xslider使用方法

---

依赖：

    <script th:src="@{/plugins/xslider/Xslider.js}"></script>

---

html:

  <div class="productshow">
        <div class="scrollcontainer">
            <ul>
                <li class="libox"> 
                </li>
                <li class="libox">
                </li>
            </ul>
        </div>
        <a href="#left" class="icon_small aleft"></a>
        <a href="#right" class="icon_small aright"></a>
    </div>

---

css:

/*轮播图主内容 css*/
.productshow{
    position: relative;
    padding: 20px 100px 0;
    overflow: hidden;
}
.productshow .scrollcontainer{
    width: 1730px;
    overflow:hidden;
    position:relative;
    margin:0 auto;
    height:887px;
}
.productshow .scrollcontainer>ul{
    width:3460px;
    position:absolute;
    left:0;
    top:0;
}
.scrollcontainer>ul>li {
    width: 1730px;
    padding-left: 20px;
    overflow: hidden;
}


.aleft, .aright {
    position: absolute;
    width: 50px;
    height: 50px;
    top: calc(50% - 25px);
}

.aleft {
    left: 20px;
    background-position: -305px -90px;
}

.aright {
    right: 20px;
    background-position: -380px -90px;
}
.agrayright {
    background-position: -227px -90px;
}
.agrayleft {
    background-position: -152px -90px;
}

---

js:

 //轮播图
    $(".productshow").Xslider({
        unitdisplayed:1,
        numtoMove:1,
        scrollobjSize:Math.ceil($(".productshow").find(".libox").length)*1730
    });