SOURCE

console 命令行工具 X clear

                    
>
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;}
}