Div carousel test

by Aides

HTML

<div class="outer">
  <div class="mover">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
  </div>
</div>

CSS

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.outer
{
  position: relative;
  outline: 1px solid blue;
  width: 320px;
  height: 480px;
  overflow: hidden;
}

.mover
{
  transform: translateX(0%);
  height: 100%;
  width: 100%;
}

.inner
{
  outline: 3px solid green;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
}

.inner:nth-child(1) {
  left: 0%;
}
.inner:nth-child(2) {
  left: 100%;
}
.inner:nth-child(3) {
  left: 200%;
}
.inner:nth-child(4) {
  left: 300%;
}
.inner:nth-child(5) {
  left: 400%;
}
.inner:nth-child(6) {
  left: 500%;
}
.inner:nth-child(7) {
  left: 600%;
}
.inner:nth-child(8) {
  left: 700%;
}
.inner:nth-child(9) {
  left: 800%;
}
.inner:nth-child(10) {
  left: 900%;
}