Swipe cover slides

by Freer Hall

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="banners">
  <input type="radio" id="slide1" name="slides" checked="checked" />
  <label class="image slide1" for="slide1"></label>
  <input type="radio" id="slide2" name="slides"  />
  <label class="image slide2" for="slide2"></label>
  <input type="radio" id="slide3" name="slides"  />
  <label class="image slide3" for="slide3"></label>
</div>

CSS

html, body{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
}
.banners {
  position:relative;
  background:#000;
  width: 100%;
  height: 100%;
  overflow:hidden;
}
.slide1{
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5T6nwVYWsbzLcLF-JNxnGXFFFwkZMBcCMbaqeTevuldkxHg0N);
}
.slide2{
  background-image:url(http://www.rd.com/wp-content/uploads/sites/2/2016/02/06-train-cat-shake-hands.jpg);
}
.slide3{
  background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKr6YlGNsqgJzvgBBkq1648_HsuDizVn_ZXC6iQp9kjXFzLvs1BA);
}
.image {
  display:block;
  width: 200vw;
  height: 200vh;
  position: absolute;
  left: -200vw;
  top: -200vh;
  margin-left:200vw;
  margin-top:200vh;
  overflow:hidden;
  z-index:1;
  clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0);
  background-attachment:fixed;
  background-position:0 0;
  background-size:100%;
  transition:z-index 2s step-end, 2s top ease-in-out, 2s left ease-in-out, 0s margin 2s;
}
input:checked + .image{
  z-index:3;
  left:-70vw;
  top:-70vh;
  margin-left:0;
  margin-top:0;
  transition:z-index 2s step-end, 2.5s top ease-in-out, 2.5s left ease-in-out, 2.5s margin ease-in-out;
}
.image:nth-child(2),
input:checked + * + * + .image{
  z-index:2;
  cursor:pointer;
}