<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
display: inline-block;
}
#slider{
width: 50px;
height: 15px;
overflow: hidden;
}
</style>
</head>
<body>
<button id="prev">prev</button>
<div id="slider">
<div>.</div>
<div>.</div>
<div>2</div>
<div>.</div>
<div>.</div>
<div>6</div>
<div>.</div>
<div>.</div>
</div>
<button id="next">next</button>
<script>
next.onclick=e=>slider.append(slider.firstElementChild);
prev.onclick=e=>slider.insertBefore(slider.lastElementChild, slider.firstChild);
</script>
</body>
</html>
|