A CodePen by Chris Mounsey. Circular Slideshow - So, I saw a nice circular slideshow at envylabs.com, and I thought that I would try to emulate it in my own way. Inevitably, it is actioned by radio inputs (I can do JQuery—I just prefer the purity of HTML

index.html

<div class="container">
    <input type="radio" name="slide-control" id="goto-slide-1" checked>
    <input type="radio" name="slide-control" id="goto-slide-2">
    <input type="radio" name="slide-control" id="goto-slide-3">
    <input type="radio" name="slide-control" id="goto-slide-4">
  <div class="reflect">
    <div class="horizon">
      <ul class="slideshow">
        <li class="slides slide-1"></li>
        <li class="slides slide-2"></li>
        <li class="slides slide-3"></li>
        <li class="slides slide-4"></li>
      </ul>
    </div>
  </div>
  <div class="controls">
    <label for="goto-slide-1">1</label>
    <label for="goto-slide-2">2</label>
    <label for="goto-slide-3">3</label>
    <label for="goto-slide-4">4</label>
  </div>
</div>

script.js

/*---- Images from The Devil Tarot: http://devilskitchen.net/pages/the-devil-tarot.php ----*/

/*---- I must finish that set someday ----*/

style.less

/*---- Feel free to alter these variables ----*/
@slideshow-diameter:600px;
@linked-transition-speed:0.5s;

/*---- Don't alter this ----*/
@slideshow-radius:@slideshow-diameter / 2;

/*---- Adopt "old IE" box-sizing model ----*/
* { box-sizing: border-box; }

/*---- Reset lists ----*/
.list-reset {
	margin:0;
  padding:0;
  list-style-type:none;
}

html, body { background:#212121; font-size:12px; }

/*---- Begin styles ----*/
.container {
	width:@slideshow-diameter + 2px;
  margin:2em auto;
  text-align:center;
}

.horizon {
	overflow:hidden;
  width:@slideshow-diameter;
  height:@slideshow-radius;
}

.reflect {
	box-reflect:below 4px -webkit-linear-gradient(top, rgba(0,0,0,0) 80%,rgba(0,0,0,0.1) 100%);
}

.controls {
	margin:10px 0 0 0;
  label {
  	display:inline-block;
    border:1px solid #666666;
    padding:4px 10px;
    box-shadow:0 -1px 3px rgba(0,0,0,0.95);
    background:#161616;
    z-index:10;
    color:#666666;
    font-weight:normal;
    cursor:pointer;
    &:hover {
    	border-color:#ddd;
      color:white;
    }
  }
}

.slideshow {
  .list-reset;
  width:@slideshow-diameter;
  height:@slideshow-diameter;
  position:relative;
  .slides {
  	.list-reset;
    display:block;
    position:absolute;
    height:@slideshow-radius;
    width:@slideshow-diameter;
    opacity:0;
    z-index:1;
    background-size:100% auto;
    transform:rotate(180deg);
    transform-origin:50% 100%;
    transition:	z-index 0 ease 0,
      					opacity 0 ease @linked-transition-speed,
      					transform @linked-transition-speed ease @linked-transition-speed;
    /*---- Decoration ----*/
    border:1px solid #121212;
    box-shadow:	inset 0 0 4px rgba(0,0,0,0.8),
      					inset 0 -2px 1px rgba(255,255,2555,0.4)
      					0 6px 8px rgba(0,0,0,0.8);
    &.slide-1 {
      top:0;
      left:0;
      border-radius:@slideshow-radius @slideshow-radius 0 0;
      background:url(http://devilskitchen.net/media/circle-slides/justice.jpg) no-repeat left 60%;
    }
    &.slide-2 {
      top:0;
      left:0;
      border-radius:@slideshow-radius @slideshow-radius 0 0;
      background:url(http://devilskitchen.net/media/circle-slides/magician.jpg) no-repeat left 60%;
    }
    &.slide-3 {
      top:0;
      left:0;
      border-radius:@slideshow-radius @slideshow-radius 0 0;
      background:url(http://devilskitchen.net/media/circle-slides/tower.jpg) no-repeat left 30%;
    }
    &.slide-4 {
      top:0;
      left:0;
      border-radius:@slideshow-radius @slideshow-radius 0 0;
      background:url(http://devilskitchen.net/media/circle-slides/world.jpg) no-repeat left 40%;
    }
  }
}

input[type="radio"] {
  margin:-20px 0 0 -50px;
  display:none;
  &#goto-slide-1 {
  	&:checked ~ .reflect .horizon {
      .slide-1 {
        opacity:1;
        z-index:5;
        transform:rotate(0deg);
        transition:	z-index 0 ease 0s,
          					transform @linked-transition-speed ease 0s,
          					opacity @linked-transition-speed ease 0s;
      }
    }
  }
  &#goto-slide-2 {
  	&:checked ~ .reflect .horizon {
      .slide-2 {
        opacity:1;
        z-index:5;
        transform:rotate(0deg);
        transition:	z-index 0 ease 0s,
          					transform @linked-transition-speed ease 0s,
          					opacity @linked-transition-speed ease 0s;
      }
    }
  }
  &#goto-slide-3 {
  	&:checked ~ .reflect .horizon {
      .slide-3 {
        opacity:1;
        z-index:5;
        transform:rotate(0deg);
        transition:	z-index 0 ease 0s,
          					transform @linked-transition-speed ease 0s,
          					opacity @linked-transition-speed ease 0s;
      }
    }
  }
  &#goto-slide-4 {
  	&:checked ~ .reflect .horizon {
      .slide-4 {
        opacity:1;
        z-index:5;
        transform:rotate(0deg);
        transition:	z-index 0 ease 0s,
          					transform @linked-transition-speed ease 0s,
          					opacity @linked-transition-speed ease 0s;
      }
    }
  }
}