HTML
<div class="box">
<input type="radio" name="a" id="left" />
<label for="left" class="left"><span><</span></label>
<input type="radio" name="a" id="right" />
<label for="right" class="right"><span>></span></label>
<ul>
<li><img src="./imgs/1.jpg" alt="" /></li>
<li><img src="./imgs/2.jpg" alt="" /></li>
</ul>
</div>
CSS
* {
margin: 0;
}
.box {
margin: 200px 500px;
width: 500px;
height: 400px;
overflow: hidden;
}
ul {
list-style-type: none;
display: flex;
padding: 0;
margin: 0;
}
img {
width: 500px;
height: 400px;
vertical-align: middle;
}
.left {
position: absolute;
top: 400px;
color: #fff;
background-color: #999;
padding: 3px 10px;
cursor: pointer;
}
.right {
position: absolute;
top: 400px;
left: 970px;
color: #fff;
background-color: #999;
padding: 3px 10px;
cursor: pointer;
}
#left:checked ~ ul {
transform: translateX(0px);
}
#right:checked ~ ul {
transform: translateX(-500px);
}
input {
display: none;
}
label {
z-index: 1;
}