A super neat slider using Greensock's Draggable plugin
Created
January 9, 2017 05:57
-
-
Save CodeMyUI/c308bba1fc882b28a65e8701c960f966 to your computer and use it in GitHub Desktop.
29/52 - Circular Slider
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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>' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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" /> |
Actually incredible, thank you for your work and for sharing it in public. Wish you all the best.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.