Demo translate3d carousel

by Glynne Turner

HTML

<div class="container">
    <div class="track">
      <div>
        <h3>1</h3>
      </div>
      <div>
        <h3>2</h3>
      </div>
      <div>
        <h3>3</h3>
      </div>
      <div>
        <h3>4</h3>
      </div>
      <div>
        <h3>5</h3>
      </div>
      <div>
        <h3>6</h3>
      </div>
      <div>
        <h3>7</h3>
      </div>
      <div>
        <h3>8</h3>
      </div>
    </div>  
  </div>
  
  <p>
  For performance tests. This is done with css <code>transform: translate3d</code>. Compare to <a href="https://jsfiddle.net/ldwg/2Le9hhue/" target="_blank">jquery slick version</a>. February 2016
</p>

CSS

div {
  box-sizing:border-box;
}
.container {
  margin:auto;
  overflow:hidden;
  width:540px;
}
.track {
  width:3260px;
  -webkit-animation-name:             slide-by-transform;
  -webkit-animation-duration:         2s;
  -webkit-animation-timing-function:  ease;
  -webkit-animation-iteration-count:  infinite;
  -webkit-animation-fill-mode:        both;
}

.container, .track div {
  height:120px;
}

.track div {
  background-color:#fff;
  text-align:center;
  padding-top:25px;
//  border:5px solid #eee;
  float:left;
  width:540px;
}
.track div:nth-child(odd) {
  background-color: #000;
  color: #fff;
}

@-webkit-keyframes slide-by-transform {
  0%     {-webkit-transform: translate3d(0, 0, 0);}
  20%     {-webkit-transform: translate3d(-540px, 0, 0);}
  40%     {-webkit-transform: translate3d(-1080px, 0, 0);}
  60%     {-webkit-transform: translate3d(-1620px, 0, 0);}
  80%     {-webkit-transform: translate3d(-2160px, 0, 0);}
  100%     {-webkit-transform: translate3d(-2700px, 0, 0);}
} 

// Styling only
body {
  background:#9cf;
  font-family: sans-serif;
}