<svg class="svg-mask" width="1200px" height="600px" viewBox="0 0 1200 600">
 <defs>
  <clipPath id="quarterMask">
    <path d="M299.001,26.649L0,325.65c330.267,330.268,865.736,330.268,1196.004,0L897.003,26.649
    C731.868,191.784,464.136,191.784,299.001,26.649z"/>
  </clipPath>
 </defs>
</svg>
<div class="header"></div>
<div class="content">
  <ul class="featured-slider" id="wheel">
    <li class="active">
      <div class="image">
          <div class="details">
    <h1 class="title">Lorem Ipsum</h1>
    <hr class="small" />
    <h6 class="roles">Videography / Editing</h6>
    <a href="#" class="button">View Project</a>
  </div>
        <img src="https://unsplash.it/1200/900" alt="" />
      </div>
    </li>
    <li>
      <div class="image">
          <div class="details">
    <h1 class="title">Lorem Ipsum</h1>
    <hr class="small" />
    <h6 class="roles">Videography / Editing</h6>
    <a href="#" class="button">View Project</a>
  </div>
        <img src="https://unsplash.it/1200/901" alt="" />
      </div>
    </li>
    <li>
      <div class="image">
          <div class="details">
    <h1 class="title">Lorem Ipsum</h1>
    <hr class="small" />
    <h6 class="roles">Videography / Editing</h6>
    <a href="#" class="button">View Project</a>
  </div>
        <img src="https://unsplash.it/1200/902" alt="" />
      </div>
    </li>
    <li>
      <div class="image">
          <div class="details">
            <h1 class="title">Lorem Ipsum</h1>
            <hr class="small" />
            <h6 class="roles">Videography / Editing</h6>
            <a href="#" class="button">View Project</a>
          </div>
        <img src="https://unsplash.it/1200/903" alt="" />
      </div>
    </li>
  </ul>
</div>

<nav>
  <a class="prev">Prev</a>
  <a class="next">Next</a>
</nav>
<div id="pentitle" style="display: none;" data-title="29/52 - Circular Slider"></div>


<style>
/*font-family: serif !important;
*/
 body {
     background: #222;
     color: #eee;
     overflow: hidden;
}
 a {
     color: #fff;
}
 a:hover {
     color: gray;
}
 h1, h2, h3, h4, h5, h6 {
     text-transform: uppercase;
     font-weight: bold;
}
 .site {
    /*padding: 70px;
    */
}
 .header {
     position: fixed;
     width: 100%;
     left: 0;
     padding: 0 50px;
     z-index: 9;
}
 .header {
     top: 0;
     padding-top: 50px;
     pointer-events: none;
}
 .header:after {
     content: ' ';
     width: 100%;
     height: 100px;
     position: absolute;
     z-index: 9;
     top: 0;
     left: 0;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#333333+0,000000+100&1+0,0+50 */
     background: -moz-linear-gradient(top, rgba(34, 34, 34, 1) 0%, rgba(34, 34, 34, 0) 100%);
    /* FF3.6-15 */
     background: -webkit-linear-gradient(top, rgba(34, 34, 34, 1) 0%, rgba(34, 34, 34, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
     background: linear-gradient(to bottom, rgba(34, 34, 34, 1) 0%, rgba(34, 34, 34, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#222222',GradientType=0);
    /* IE6-9 */
}
 .header > * {
     position: relative;
     z-index: 10;
     pointer-events: all;
}
 hr.small {
     width: 50px;
}
 .details {
     position: fixed;
     width: 500px;
     top: -100px;
     left: 50%;
     transform: translateX(-50%);
     text-align: center;
}
 .details .title {
     margin-bottom: 0;
}
 .details .button {
     background: transparent;
     border: 1px solid white;
     text-transform: uppercase;
     font-weight: bold;
     font-size: 10px;
     letter-spacing: 2px;
     margin-top: 1rem;
     z-index: 9999;
}
 .details .button:hover {
     background: #fff;
     color: #222;
}
 .svg-mask {
     position: absolute;
}
 .featured-slider {
     position: relative;
     margin: 0;
     height: 0;
     width: 0;
     top: 0;
     left: 50%;
     transform: scale(0.75) translateY(-100px);
}
 .featured-slider li {
     user-select: none;
     list-style: none;
     position: absolute;
     top: 0;
     left: 0;
     transition: opacity 0.5s ease;
     opacity: 0.25;
}
 .featured-slider li.active {
     opacity: 1;
}
 .featured-slider li:nth-child(1) {
     transform: translate(-50%, -50%) rotate(0deg);
}
 .featured-slider li:nth-child(2) {
     transform: translate(-50%, -50%) rotate(90deg);
}
 .featured-slider li:nth-child(3) {
     transform: translate(-50%, -50%) rotate(180deg);
}
 .featured-slider li:nth-child(4) {
     transform: translate(-50%, -50%) rotate(270deg);
}
 .featured-slider li .image {
     width: 1200px;
     height: auto;
     transform: translate(1px, 728px);
}
 .featured-slider li .image img {
     clip-path: url(#quarterMask);
}
 nav {
     position: absolute;
     bottom: 30%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 100;
     width: 100%;
}
 nav .prev, nav .next {
     background-color: black;
     padding: 0.25rem 0.5rem;
     color: white;
}
 nav .prev {
     float: left;
}
 nav .next {
     float: right;
}
 
</style>



<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/utils/Draggable.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/152635/CSSPlugin.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/152635/ThrowPropsPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/152635/codepen-ga.js"></script>
<script>
var wheel = Draggable.create("#wheel", {
   type:"rotation",
   throwProps:true,
     snap:function(endValue) {
      return Math.round(endValue / 90) * 90;
   },  
    onDrag: function() {},
    onThrowComplete: function() {
      dragActive()
    }
});

TweenMax.set('#wheel li:not(.active) .details > *', {
  opacity: 0,
  y: -10
})

// Calculate which product is active
function dragActive() {
  var rot = wheel[0].rotation / 360
  var decimal = rot % 1
  var sliderLength = $('#wheel li').length
  var tempIndex = Math.round(sliderLength * decimal)
  var index

  if (rot < 0) {
    index = Math.abs(tempIndex)
  } else {
    index = sliderLength - tempIndex
  }

  if (decimal === 0) {
    index = 0
  }
  
  TweenMax.staggerTo('#wheel li.active .details > *', 0.6,   {
    opacity: 0,
    y: -10
  }, 0.1)

  $('#wheel li.active').removeClass('active')
  $($('#wheel li')[index]).addClass('active')
  
  TweenMax.staggerTo('#wheel li.active .details > *', 0.6,   {
    opacity: 1,
    y: 0
  }, 0.1)

}

// Tween rotation
function rotateDraggable(deg, callback) {
  var rot = wheel[0].rotation
  var tl = new TimelineMax()

  tl
    .to('#wheel', .5, {
      rotation: rot + deg,
      onComplete: function() {
        callback()
      }
    });

  wheel[0].rotation = rot + deg
}

// Handlers
function nextHandler() {
  var current = $('#wheel li.active')
  var item = current + 1
  if (item > $('#wheel li').length) {
    item = 1
  }
  rotateDraggable(360/$('#wheel li').length, dragActive);
}

function prevHandler() {
  var current = $('#wheel li.active')
  var item = current - 1
  if (item > 1) {
    item = $('#wheel li').length
  }
  rotateDraggable(-360/$('#wheel li').length, dragActive);
}

$('.next').on('click', nextHandler);
$('.prev').on('click', prevHandler);

var square = '<svg x="0px" y="0px" width="1200px" height="600px" viewBox="0 0 1200 600"><rect x="0.002" y="0.499" width="1200" height="600"/></svg>'
</script>