依赖：
<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
});
