29/52 - Circular Slider

## 29-52-circular-slider.markdown

      
        

          Raw
        
        
          
            
          
          
            
              29-52-circular-slider.markdown
            
          
        
      
    
  
    29/52 - Circular Slider
A super neat slider using Greensock's Draggable plugin
A Pen by Sean on CodePen.
License.

  

  

## index.html
<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>

## script.js
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>'

## scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//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>

## style.scss
body {
    /*font-family: serif !important;*/
    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;
  .title {
    margin-bottom: 0;
  }
  .button {
    background: transparent;
    border: 1px solid white;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 10px;
    letter-spacing: 2px;
    margin-top: 1rem;
    &:hover {
      background: #fff;
      color: #222;
    }
  }
}

// Slider
.svg-mask {
  position: absolute;
}

.featured-slider {
  position: relative;
  margin: 0;
  height: 0;
  width: 0;
  top: 0;
  left: 50%;
  transform: scale(0.75) translateY(-100px);
  // pointer-events: none;
  li {
    user-select: none;
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease;
    opacity: 0.25;
    &.active {
      opacity: 1;
    }
    &:nth-child(1) {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    &:nth-child(2) {
      transform: translate(-50%, -50%) rotate(90deg);
    }
    &:nth-child(3) {
      transform: translate(-50%, -50%) rotate(180deg);
    }
    &:nth-child(4) {
      transform: translate(-50%, -50%) rotate(270deg);
    }
    .image {
      width: 1200px;
      height: auto;
      transform: translate(1px, 728px);
      img {
        clip-path: url(#quarterMask);
      }
    }
  }
}

nav {
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  width: 100%;
  .prev,
  .next {
    background-color: black;
    // border-radius: 100px;
    padding: 0.25rem 0.5rem;
    color: white;
  }
  .prev {
    float: left;
  }
  .next {
    float: right;
  }
}

## styles
<link href="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" rel="stylesheet" />
<link href="https://cdn.snipcart.com/themes/base/snipcart.min.css" rel="stylesheet" />