<div id="main">
<div id="slide">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
<div id="left"><</div>
<div id="right">></div>
body {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
}
#main {
width: 400px;
height: 210px;
overflow: hidden;
transform: translate(-50%, -50%) scale(1) rotate(0);
}
#left, #right {
width: 20px;
height: 210px;
line-height: 210px;
border: 0;
text-align: center;
background: black;
opacity: 0.3;
color: white;
text-decoration: none;
position: absolute;
transform: translate(-50%, -50%) scale(1) rotate(0);
top: 0;
cursor: pointer;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;
}
#left {
left: -190px;
}
#right {
left: 190px;
}
#slide {
width: 1600px;
height: 210px;
transition: all 0.5s;
}
span {
width: 400px;
height: 210px;
float: left;
color: white;
font-family: sans-serif;
text-align: center;
line-height:210px;
}
span:nth-child(1) {background:#E91E63}
span:nth-child(2) {background:#9C27B0}
span:nth-child(3) {background:#673AB7}
span:nth-child(4) {background:#3F51B5}
var slider = document.getElementById('slide'),
btnLeft = document.getElementById('left'),
btnRight = document.getElementById('right'),
margin = 0;
btnRight.onclick = function slideRight() {
if(margin <= -1200) {
margin = 0;
} else {
margin = margin + -400;
}
slider.style.marginLeft = margin + "px";
}
btnLeft.onclick = function slideLeft() {
if(margin >= 0) {
margin = -1200;
} else {
margin = margin + 400;
}
slider.style.marginLeft = margin + "px";
}
setInterval(slideLeft, 1000);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.