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

This comment has been minimized.

Copy link

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
You can’t perform that action at this time.