29/52 - Circular Slider
A super neat slider using Greensock's Draggable plugin
<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" /> |
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.