console
$('.banner').slick({
dots: false,
arrows: false,
autoplay: true,
slidesToShow: 1,
autoplaySpeed: 1000
});
<script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/slick-carousel/1.8.1/slick.min.js"></script>
<link href="https://cdn.bootcss.com/slick-carousel/1.8.1/slick.min.css" rel="stylesheet">
<div class="banner">
<a href="" class="item" style="background-image:url(https://picsum.photos/1920/500)"></a>
<a href="" class="item" style="background-image:url(https://picsum.photos/1920/500)"></a>
<a href="" class="item" style="background-image:url(https://picsum.photos/1920/500)"></a>
</div>
.banner .item{
display:block;
background-repeat:no-repeat;
background-position:center;
-webkit-background-size:cover;
background-size:cover;
padding-top:5%;
}
.banner .slick-arrow{
position:absolute;
width:44px;
height:82px;
top:40%;
border:0;font-size:0;
cursor:pointer;
background-color:transparent;
background-position:center;
background-repeat:no-repeat;
z-index:2;
}
.banner .slick-prev{left:30px;background-image:url(http://pic.celong.cn/15235314321.png)}
.banner .slick-next{right:30px;background-image:url(http://pic.celong.cn/15235314328.png)}
.banner .slick-dots{position:absolute;bottom:10px;left:0;right:0;text-align:center;z-index:3}
.banner .slick-dots li{display:inline-block;margin:0 10px}
.banner .slick-dots button{width:37px;height:10px;background:#757cbb;font-size:0;cursor:pointer;border:none;border-radius:5px}
.banner .slick-dots li.slick-active button{background:#8dc556}
@media only screen and (max-width: 1600px) {
.banner .slick-arrow{width: 60px; height: 30px;}
}