layui 大图轮播效果

js css 引用
```json
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
```
HTML
```html

<div class="layui-carousel" id="test1" lay-filter="test1">
    <div carousel-item="">
        <div style=" background-image: url(https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/b1.jpg);background-repeat: no-repeat;background-size: cover;
    background-position: center top;
    width: 100%;
    height: 100%;"></div>
        <div style="background-image: url(https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/b2.jpg);background-repeat: no-repeat;background-size: cover;
    background-position: center top;
    width: 100%;
    height: 100%;"></div>
    </div>
</div>
```
layui
```java
layui.define(['jquery', 'element', 'carousel', 'laypage'], function(exports){
    var $ = layui.jquery
        ,element = layui.element
        ,carousel = layui.carousel//实例化
        ,laypage = layui.laypage;
    //常规轮播
   var height= $(window).height()/1.2;//获取浏览器高度

carousel.render({
        elem: '#test1'
        ,arrow: 'always',
        width: '100%'//宽带
        ,height: height+'px'//高度
    });

});
```

CSS
```css
/*layui轮播*/
.layui-carousel{width: 100%;}
.layui-carousel img{ height: 100%;}

@media (max-width: 768px){
    #test1{width: 100%;height: 280px !important;}
    .layui-carousel img{ height: 100%;}
}
```

速建时代TPCMS管理系统

layui 大图轮播效果