滑块横幅轮播

<!-- banner -->

<div class="banner-wrap">

<div class="cai-slider">

<style>

.banner-wrap{

width: 1100px;

height:300px;

padding:0 10px;

margin: 0 auto;

margin-bottom: 35px;

}

.cai-slider-item {

position: absolute;

top: 0;

left: 0;

overflow: hidden;

}

.operation-left-btn, .operation-right-btn {

cursor: pointer;

position: absolute;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

width: 30px;

height: 50px;

z-index: 2;

}

.operation-right-btn {

background-image: url(https://s1.xmcdn.com/lib/xmweb/images/web_btn_r_n_08d5a51.png);

top: 50%;

right: 0;

}

.operation-left-btn {

background-image: url(https://s1.xmcdn.com/lib/xmweb/images/web_btn_l_n_2857418.png);

top: 50%;

left: 0;

}

 

.cai-slider-warp,

.cai-slider-list {

position: relative;

height: 300px;

 

}

 

.cai-slider-warp .pic {

width: 750px;

height: 300px;

}

 

.cai-slider-item {<