$n: 6; // number of images
$t: 4; // duration and delay

.slider {
  position: relative;
  margin: 0px auto;
  transform: translate3d(0px, 0px, 0px);
  max-width: 680px;
  height: 360px;
  overflow: hidden;
  padding: 0px;
  li {
    display: block;
    position: absolute;
    list-style-type: none;
    transform-origin: center center;
    transform: scale(1) translateZ(0px);
    backface-visibility: hidden;
    opacity: .001;
    animation: fadeScale ($n*$t)+s infinite ease-in-out forwards;
    /*&:first-child {
      opacity: 1;
    }*/
    @for $i from 1 through $n {
      &:nth-child(#{$i}) {
        animation-delay: ($t*$i)+s;
      }
    }
    img {
      max-width: 100%;
      display: block;
      width: auto\9;
      height: auto;
      vertical-align: middle;
      border: 0;
    }
  }
}

@keyframes fadeScale {
  #{100%/$n} {
    opacity: 1;
  }
  #{100%/($n/2)}, 100% {
    transform: scale(1.1) translateZ(0px);
    opacity: .001;
  }
}


// other


html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: #F9F8F6;
}