<div class="container">
<section class="nautilus">
   <div style="background: url('http://d8559fa83407ca590c9c-26c3b154822345d9dde0204930c49e9c.r68.cf1.rackcdn.com/2860546_a1e73ae4_m.jpeg') center center / cover no-repeat ">
   
  </div>
 
  <div style="background: url('http://www.youthedesigner.com/wp-content/uploads/2013/02/37.jpg') center center / cover no-repeat "></div>
  <div style="background: url('http://i.kinja-img.com/gawker-media/image/upload/s--vl1wPe4w--/c_scale,fl_progressive,q_80,w_800/18ioy0rbeb5dxjpg.jpg') center center / cover no-repeat "></div>
  <div style="background: url('http://worksdesigngroup.com/wp-content/uploads/2014/01/105855_2_600.jpeg') center center / cover no-repeat "></div>
  <div style="background: url('https://founterior.com/wp-content/uploads/2014/02/lamp-product-design-Port-by-Alexander-Taylor.jpg') center center / cover no-repeat "></div>
 <div style="background: url('https://hovercraftdoggy.files.wordpress.com/2012/04/tumblr_lwbkwwuxjo1qdixcio2_1280.jpg') center center / cover no-repeat "></div> 
  <div style="background: url('https://assets.yellowtrace.com.au/wp-content/uploads/2012/02/yellowtrace_Hanging-Clock-by-Lucas-Peet-Design_01.jpg') center center / cover no-repeat "></div>
</section>
<section class="back">
  <div class="column">
    <h1>Nautilus Slideshow</h1>
    <h2>Click Here</h2> 
  </div>  
</section>
</div>  
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  background: black;
  font-family: roboto;
}
.container {
  display: flex;
  flex-direction: row;
  section.forward {
    flex-grow: 1;
    cursor: pointer;
  }
  section.back {
    flex-grow: 1;
    cursor: pointer;
    background: #52F9D4;
    background: #eeeeee;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
.nautilus{
  background: #ddd;
  position: relative;
  min-width: 161.8034vh;
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
}

.nautilus > div{
  position: absolute;
  z-index: 900;
  transition: all 400ms ease-out;
  animation: genie 400ms forwards ease-out;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  width:9.016986vh;
  height: 5.57280vh;
  left: 114.59055442vh;
  top: 70.820377901vh;
  opacity: 0;
  
  &:nth-child(1){
  opacity: 1;
  width: 100vh;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #52F9D4;
  z-index: 999;
}
&:nth-child(2){
  // border-bottom: 1px solid white;
  opacity: 1;
  width: 61.8034vh;
  height: 61.8034vh;
  top: 0vh;
  left: 100vh;
  background-color: #51E3C2;
  z-index: 998;
}
&:nth-child(3){
  // border-left: 1px solid white;
  opacity: 1;
  width: 38.19783669vh;
  height: 38.19783669vh;
  top: 61.8034vh;
  left: 123.60615331vh;
  background-color: #53C7AD;
  z-index: 997;
}
&:nth-child(4){
  // border-top: 1px solid white;
  opacity: 1;
  width: 23.60778717vh;
  height: 23.60778717vh;
  top: 76.39221283vh;
  left: 100vh;
  background-color: #51AF9A;
  z-index: 996;
}
&:nth-child(5){
    // border-right: 1px solid white;
  opacity: 1;
  height: 14.59055442vh;
  width: 14.59055442vh;
  top: 61.8034vh;
  left: 100vh;
  background: #4D9686;
  z-index: 995;
}
&:nth-child(6){
  // border-bottom: 1px solid white;
  opacity: 1;
  height: 9.016986vh;
  width:  9.016986vh;
  top: 61.8034vh;
  left: 114.59055442vh;
  background: #498376;
  z-index: 994;
}
  &:nth-child(7){
    opacity: 1;
    width:9.016986vh;
    height: 5.57280vh;
    left: 114.59055442vh;
    top: 70.820377901vh;
      z-index: 993;
  }
}

@keyframes genie {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
button {
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
  width: 200px;
}
.column {
  padding: 1rem;
  color: #333;
  h1, h2, h3, h4 {
    font-weight: 300;
  }
  h1 {
    font-size: 48px;
  }
  h2 {
    font-size: 24px;
  }
}
View Compiled
var interval = 500;

var slide;

$('section.back').click(function(){
  var slide = $('.nautilus div:last-child').remove();
  $('.nautilus').prepend(slide);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js