* { margin:0; padding:0; } ul { list-style:none; } .clearfix { zoom:1; } .clearfix::after { display:block; content:''; clear:both; visibility:hidden; } .container { position:relative; width:620px; height:300px; margin:100px auto; background:#ebeaeb; padding:30px; border-radius:20px; } .wrap { position:relative; width:620px; overflow:hidden; } .wrap ul { position:relative; } .wrap ul li { float:left; width:200px; height:300px; margin-right:30px; background:#999; text-align:center; font-size:30px; color:#fff; line-height:300px; } .wrap ul li.bg1 { background:orange; } .wrap ul li.bg2 { background:paleturquoise; } .wrap ul li.bg3 { background:blueviolet; } .wrap ul li.bg4 { background:palevioletred; } .wrap ul li.bg5 { background:yellowgreen; } .wrap ul li.bg6 { background:yellow; } .wrap ul li.bg7 { background:blue; } a { position:absolute; top:50%; margin-top:-20px; display:block; width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,0.8); color:#fff; font-size:30px; text-align:center; line-height:40px; text-decoration:none; } a.next { right:-20px; } a.prev { left:-20px; }