Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
29/52 - Circular Slider

29/52 - Circular Slider

A super neat slider using Greensock's Draggable plugin

A Pen by Sean on CodePen.

License.

<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>
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 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>
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;
}
}
<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" />
@ilmam
Copy link

ilmam commented Mar 3, 2017

I am using the code above, but the slider is not showing correctly and images are invisible. Is there any other library I am missing? I don't get any js error. just nothing working.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment