A CodePen by TJ Peden.

index.slim

.well#wrapper
  .slider
    img src="http://placehold.it/600x250.png&text=one" alt="one"
    img src="http://placehold.it/600x250.png&text=two" alt="two"
    img src="http://placehold.it/600x250.png&text=three" alt="three"

script.js

// Pure CSS Slider

style.less

#slider {
  .new (@image-count, @slide-time: 1, @display-time: 6) {
    @total-time: @slide-time * 2 + @display-time;
    @full-animation-time: @total-time * @image-count;

    .keyframes (@num) {
      @start: percentage(@slide-time / @full-animation-time);
      @end: percentage((@slide-time + @display-time) / @full-animation-time);
      @next: percentage(1 / @num);

      @-webkit-keyframes slide {
        0% { left: 700px; }
        (@start), (@end) { left: 0; }
        (@next), 100% { left: -700px; }
      }
    }

    .inject (@num) {
      .make (0) {}
      .make (@index) when (@index > 0) {
        .make(@index - 1);
        @delay: (@index - 1) * @total-time;
        &:nth-child(@index) {
          -webkit-animation-name: slide;
          -webkit-animation-delay: ~"@{delay}s";
          -webkit-animation-duration: ~"@{full-animation-time}s";
          -webkit-animation-iteration-count: infinite;
        }
      }
      .make(@num);
    }

    .slider {
      .slider-size;
      position: relative;
      overflow: hidden;

      img {
        position: absolute;
        display: block;
        left: 700px;
        .inject(@image-count);
      }
    }
    .keyframes(@image-count);
  }
}

.slider-size () {
  width: 600px;
  height: 250px;
}

#slider > .new(3);

.slider {
  background: url(http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png) no-repeat center center;
}

#wrapper {
  .slider-size;
  margin: 50px auto;
  padding: 50px;
}

body {
  background: #E3E9ED;
}

// Twitter Bootstrap well class (modified)
@wellBackground: #f5f5f5;
.well {
  background-color: @wellBackground;
  border: 1px solid darken(@wellBackground, 7%);
  border-radius: 6px;
  box-shadow: inset 1 1px 1px rgba(0, 0, 0, 0.1);
}