Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Aug 24, 2016
Embed
What would you like to do?
PzVBqQ
<div class="content">
<div class="slider single-item">
<div class="quote-container">
<div class="portrait octogon"><img src="http://www.tuacahntech.com/uploads/6/1/7/9/6179841/6166205_orig.jpg" alt=""/></div>
<div class="quote">
<blockquote>
<p>Meditation shabby chic master cleanse banh mi Godard. Asymmetrical Wes Anderson Intelligentsia you probably haven't heard of them.</p>
<cite><span>Kristi McSweeney</span><br/>Thundercats twee<br/>Austin selvage beard</cite>
</blockquote>
</div>
</div>
<div class="quote-container">
<div class="portrait octogon"><img src="http://static1.squarespace.com/static/51579fb2e4b0fc0d9469ff97/56cc83dfe707ebc39cf3269f/56d0b59e27d4bde4665fded3/1457365822199/" alt=""/></div>
<div class="quote">
<blockquote>
<p>Bespoke occupy cred seitan. Austin street art freegan Truffaut leggings aesthetic, salvia chia Brooklyn flexitarian. Single-origin coffee before they sold out health goth, cornhole irony keffiyeh Austin taxidermy mlkshk blog trust fund banh mi you probably haven't heard of them.</p>
<cite><span>Dina Anderson</span><br/>Blue Bottle keffiyeh<br/>Sartorial locavore Schlitz ennui</cite>
</blockquote>
</div>
</div>
</div>
</div>
<svg>
<defs>
<clipPath id="octogon" clipPathUnits="objectBoundingBox">
<polygon points="0.50001 0.00000, 0.61887 0.06700, 0.75011 0.06721, 0.81942 0.18444, 0.93300 0.25001, 0.93441 0.38641, 1.00000 0.49999, 0.93300 0.61887, 0.93300 0.75002, 0.81556 0.81944, 0.74999 0.93302, 0.61357 0.93444, 0.50001 1.00000, 0.38118 0.93302, 0.24998 0.93302, 0.18056 0.81556, 0.06700 0.74899, 0.06559 0.61359, 0.00000 0.49999, 0.06700 0.38111, 0.06700 0.25001, 0.18440 0.18058, 0.25043 0.06700, 0.38641 0.06559, 0.50001 0.00000"></polygon>
</clipPath>
</defs>
</svg>
var prevButton = '<button type="button" data-role="none" class="slick-prev" aria-label="prev"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" version="1.1"><path fill="#FFFFFF" d="M 16,16.46 11.415,11.875 16,7.29 14.585,5.875 l -6,6 6,6 z" /></svg></button>',
nextButton = '<button type="button" data-role="none" class="slick-next" aria-label="next"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#FFFFFF" d="M8.585 16.46l4.585-4.585-4.585-4.585 1.415-1.415 6 6-6 6z"></path></svg></button>';
$('.single-item').slick({
infinite: true,
dots: true,
autoplay: true,
autoplaySpeed: 4000,
speed: 1000,
cssEase: 'ease-in-out',
prevArrow: prevButton,
nextArrow: nextButton
});
$('.quote-container').mousedown(function(){
$('.single-item').addClass('dragging');
});
$('.quote-container').mouseup(function(){
$('.single-item').removeClass('dragging');
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
html {
height: 100%;
}
body {
background: -webkit-linear-gradient(320deg, #07d9a3, #048fee);
background: linear-gradient(130deg, #07d9a3, #048fee);
background-size: 400% 400%;
-webkit-animation: gradient 16s ease infinite;
animation: gradient 16s ease infinite;
}
.content {
margin: auto;
padding: 20px;
width: 80%;
max-width: 1200px;
min-width: 300px;
}
.slick-slider {
margin: 30px auto 50px;
}
.slick-prev,
.slick-next {
color: white;
opacity: 1;
height: 40px;
width: 40px;
margin-top: -20px;
}
.slick-prev path,
.slick-next path {
fill: rgba(255, 255, 255, 0.4);
}
.slick-prev:hover path,
.slick-next:hover path {
fill: #FFFFFF;
}
.slick-prev {
left: -35px;
}
.slick-next {
right: -35px;
}
.slick-prev:before,
.slick-next:before {
content: none;
}
.slick-dots li button:before {
color: rgba(255, 255, 255, 0.4);
opacity: 1;
font-size: 8px;
}
.slick-dots li.slick-active button:before {
color: #FFFFFF;
}
.quote-container {
min-height: 200px;
color: #666666;
font-size: 36px;
margin: 0 20px;
position: relative;
}
.quote-container:hover {
cursor: -webkit-grab;
cursor: grab;
}
.quote-container .portrait {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: 140px;
width: 140px;
overflow: hidden;
}
.quote-container .portrait img {
display: block;
height: auto;
width: 100%;
}
.quote-container .quote {
position: relative;
z-index: 600;
padding: 40px 0 40px 180px;
margin: 0;
font-size: 20px;
font-style: italic;
line-height: 1.4 !important;
font-family: Calibri;
color: white;
}
.quote-container .quote p {
position: relative;
margin-bottom: 20px;
}
.quote-container .quote p:first-child:before {
content: '\201C';
color: rgba(255, 255, 255, 0.44);
font-size: 7.5em;
font-weight: 700;
opacity: 1;
position: absolute;
top: -.4em;
left: -.2em;
text-shadow: none;
z-index: -10;
}
.quote-container .quote cite {
display: block;
font-size: 14px;
}
.quote-container .quote cite span {
font-size: 16px;
font-style: normal;
letter-spacing: 1px;
text-transform: uppercase;
}
.dragging .quote-container {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.octogon {
-webkit-clip-path: polygon(50% 0%, 38.11% 6.7%, 24.99% 6.72%, 18.06% 18.44%, 6.7% 25%, 6.56% 38.64%, 0% 50%, 6.7% 61.89%, 6.7% 75%, 18.44% 81.94%, 25% 93.3%, 38.64% 93.44%, 50% 100%, 61.88% 93.3%, 75% 93.3%, 81.94% 81.56%, 93.3% 74.9%, 93.44% 61.36%, 100% 50%, 93.3% 38.11%, 93.3% 25%, 81.56% 18.06%, 74.96% 6.7%, 61.36% 6.56%, 50% 0%);
clip-path: url(#octogon);
height: 140px;
width: 140px;
}
@-webkit-keyframes gradient {
0% {
background-position: 5% 0%;
}
50% {
background-position: 96% 100%;
}
100% {
background-position: 5% 0%;
}
}
@keyframes gradient {
0% {
background-position: 5% 0%;
}
50% {
background-position: 96% 100%;
}
100% {
background-position: 5% 0%;
}
}
<link href="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" rel="stylesheet" />
<link href="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment