<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/sedlukha/pen/bBGLMd?limit=all&page=69&q=draggable" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://unpkg.com/flickity@2.0/dist/flickity.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,500'>
<style class="cp-pen-styles">/*--------------------------------------------------------------
# Variables
-------------------------------------------------------------- */
/* --------------------------------------------------------------
# Global
-------------------------------------------------------------- */
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
}
a, button {
background: none;
border: none;
-webkit-tap-highlight-color: transparent;
}
a:checked, a:visited, a:active, a:focus, button:checked, button:visited, button:active, button:focus {
outline: 0;
}
html, body {
height: 100%;
}
body {
background-color: #fafafa;
display: flex;
justify-content: center;
align-items: center;
overflow-y: hidden;
}
a {
display: block;
}
.flickity-enabled {
display: block !important;
}
/* --------------------------------------------------------------
# Index
-------------------------------------------------------------- */
.phone {
background-color: #f1f1f1;
width: 320px;
height: 485px;
box-shadow: 0px 1px 13px #c7c6c6;
}
.header {
padding: 9px 9px 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.header__buttons {
padding: 9px 4.5px;
height: 33px;
}
.header__buttons-svg {
width: 15px;
height: 13px;
}
.header__logo {
font-family: "Times New Roman", "Times", serif;
font-weight: 600;
color: #222;
font-size: 25px;
line-height: 36px;
}
.categories {
width: 100%;
position: relative;
}
.categories::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 27px;
background: linear-gradient(to right, #f1f1f1, rgba(241, 241, 241, 0));
z-index: 100;
}
.categories::after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 27px;
background: linear-gradient(to left, #f1f1f1, rgba(241, 241, 241, 0));
z-index: 100;
}
.categories-list {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
color: #afafaf;
font-size: 10px;
line-height: 27px;
text-transform: uppercase;
letter-spacing: 1px;
white-space: nowrap;
font-family: "Roboto", sans-serif;
font-weight: 400;
}
.categories-list li {
flex-shrink: 0;
}
.categories-list a {
padding: 0 9px;
}
.slide-wrapper {
width: 100%;
}
.slide {
width: 100%;
position: relative;
display: inline-block;
}
.post-card {
flex-shrink: 0;
width: calc(100% - 40px);
padding: 9px 3px;
}
.post-card img {
box-shadow: 0px 0px 5px #c6c6c6;
}
.post__description {
z-index: -1;
display: block;
position: relative;
width: calc(100% - 18px);
margin: auto;
padding: 9px;
background: #fff;
box-shadow: 0 0 10px #dddddd;
top: -4px;
}
.post__description__category {
position: relative;
display: block;
color: #afafaf;
font-size: 7px;
line-height: 9px;
text-transform: uppercase;
letter-spacing: 1px;
font-family: "Roboto", sans-serif;
font-weight: 400;
}
.post__description__title {
position: relative;
font-size: 20px;
line-height: 22.5px;
font-family: "Times New Roman", "Times", serif;
font-weight: 600;
color: #222;
max-width: 95%;
}
.post__description__excerpt {
position: relative;
display: block;
font-family: "Roboto", sans-serif;
font-weight: 400;
color: #afafaf;
font-size: 10px;
line-height: 12.6px;
max-width: 90%;
}
.post__description__counter {
position: relative;
transform-origin: 0 0;
position: absolute;
right: 10px;
bottom: 10px;
white-space: nowrap;
width: 8px;
font-size: 8px;
line-height: 8px;
letter-spacing: 0.5px;
color: #afafaf;
font-family: "Roboto", sans-serif;
font-weight: 400;
}
.counter {
display: block;
font-family: "Roboto", sans-serif;
font-weight: 500;
color: #afafaf;
width: 40px;
font-size: 10px;
margin: auto;
letter-spacing: 1px;
position: relative;
}
/* --------------------------------------------------------------
# Animations
-------------------------------------------------------------- */
.header {
opacity: 0;
transform: translateY(50px);
}
.categories {
opacity: 0;
transform: translateY(50px);
}
.categories-slides {
opacity: 0;
}
#all-photos .post-card:nth-child(1), #all-photos .post-card:nth-child(2), #all-photos .post-card:last-child {
top: 50px;
opacity: 0;
padding: 20px;
}
#all-photos .post-card:nth-child(1) .post__description, #all-photos .post-card:nth-child(1) .post__description__category, #all-photos .post-card:nth-child(1) .post__description__title, #all-photos .post-card:nth-child(1) .post__description__excerpt, #all-photos .post-card:nth-child(1) .post__description__counter {
top: -80px;
opacity: 0;
}
.post__description, .post__description__category, .post__description__title, .post__description__excerpt {
transform: translateY(-80px);
}
.post__description__counter {
opacity: 0;
transform: translate(8px, 100%) rotate(-90deg);
}
.counter {
opacity: 0;
top: -10px;
}
.onload .header, .onload .categories, .onload .categories-slides {
opacity: 1;
transform: translateY(0);
}
.onload .header {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.onload .categories {
transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
}
.onload #all-photos .post-card:nth-child(1), .onload #all-photos .post-card:nth-child(2), .onload #all-photos .post-card:last-child {
top: 0px;
opacity: 1;
padding: 9px 3px;
}
.onload #all-photos .post-card:nth-child(1) {
transition: padding 0.3s ease 0.4s, transform 0.3s ease, opacity 0.3s ease 0.4s;
}
.onload #all-photos .post-card:nth-child(1) .post__description__excerpt, .onload #all-photos .post-card:nth-child(1) .post__description__title, .onload #all-photos .post-card:nth-child(1) .post__description__category, .onload #all-photos .post-card:nth-child(1) .post__description__counter {
top: 0px;
opacity: 1;
}
.onload #all-photos .post-card:nth-child(1) .post__description {
top: -4px;
opacity: 1;
transition: top 0.3s ease 0.7s, transform 0.3s ease;
}
.onload #all-photos .post-card:nth-child(1) .post__description__excerpt {
transition: top 0.3s ease 1s, transform 0.3s ease 0.3s;
}
.onload #all-photos .post-card:nth-child(1) .post__description__title {
transition: top 0.3s ease 1.1s, transform 0.3s ease 0.4s;
}
.onload #all-photos .post-card:nth-child(1) .post__description__category {
transition: top 0.3s ease 1.2s, transform 0.3s ease 0.5s;
}
.onload #all-photos .post-card:nth-child(1) .post__description__counter {
transform: translate(0, 100%) rotate(-90deg);
transition: top 0.3s ease 0.95s, opacity 0.3s ease 1s;
}
.onload #all-photos .post-card:nth-child(2), .onload #all-photos .post-card:last-child {
transition: padding 0.3s ease 0.6s, transform 0.3s ease, opacity 0.3s ease 0.6s;
}
.onload .slide-wrapper:nth-child(1) .counter {
opacity: 1;
top: 0;
transition: opacity 0.3s ease 1.3s, top 0.3s ease 1.3s;
}
.categories {
transition: color 0.3s ease;
}
.categories .is-selected {
color: #222;
}
.post-card {
transform: scale(0.95);
transition: transform 0.2s ease;
}
.post-card.is-selected {
transform: scale(1);
}
.onload .is-selected .post-card.is-selected .post__description, .onload .is-selected .post-card.is-selected .post__description__excerpt, .onload .is-selected .post-card.is-selected .post__description__title, .onload .is-selected .post-card.is-selected .post__description__category {
transform: translateY(0);
}
.onload .is-selected .post-card.is-selected .post__description {
transition: transform 0.3s ease 0.2s;
}
.onload .is-selected .post-card.is-selected .post__description__excerpt {
transition: transform 0.3s ease 0.3s;
}
.onload .is-selected .post-card.is-selected .post__description__title {
transition: transform 0.3s ease 0.4s;
}
.onload .is-selected .post-card.is-selected .post__description__category {
transition: transform 0.3s ease 0.5s;
}
.onload .is-selected .post-card.is-selected .post__description__counter {
opacity: 1;
transform: translate(0, 100%) rotate(-90deg);
transition: transform 0.3s ease 0.25s, opacity 0.3s ease 0.3s;
}
.onload .is-selected .counter {
opacity: 1;
transform: translateY(0);
top: 0;
transition: opacity 0.3s ease 0.6s, top 0.3s ease 0.6s;
}
.to85 {
transform: scale(0.8);
transition: transform 0.1s ease;
}
.lol {
background-image: url(img/albums/1.jpg);
}
</style></head><body>
<div class="phone">
<div style="display:none">
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="menuthinner" viewbox="0 0 16 15">
<style>.ast0{fill:#222}</style>
<path class="ast0" d="M0 0h16v1H0zM0 7h16v1H0zM4 14h12v1H4z"></path>
</symbol>
<symbol id="view" viewbox="0 0 16 16">
<style>.bst0{fill:#222}</style>
<path class="bst0" d="M0 0v7h7V0H0zm6 6H1V1h5v5zM9 0v7h7V0H9zm6 6h-5V1h5v5zM9 9v7h7V9H9zm6 6h-5v-5h5v5zM0 9v7h7V9H0zm6 6H1v-5h5v5z"></path>
</symbol>
</svg>
</body>
</html>
</div>
<header class="header">
<button class="header__buttons" id="header__view-button" type="button">
<svg class="header__buttons-svg">
<use xlink:href="#view"></use>
</svg>
</button>
<h1 class="header__logo"> <a href="#0">Photographer</a></h1>
<button class="header__buttons" id="header__menu-button" type="button">
<svg class="header__buttons-svg">
<use xlink:href="#menuthinner"></use>
</svg>
</button>
</header>
<nav class="categories">
<ul class="categories-list">
<li><a href="#">All photos</a></li>
<li><a href="#">Portraits</a></li>
<li><a href="#">Weddings</a></li>
<li><a href="#">Love stories</a></li>
<li><a href="#">Albums</a></li>
</ul>
</nav>
<main>
<div class="categories-slides">
<div class="slide-wrapper">
<div class="slide" id="all-photos">
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/albums/1.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">albums</p>
<h2 class="post__description__title">Urban and cities</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/wedding/2.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">weddings</p>
<h2 class="post__description__title">Mary & Lesha</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/lovestories/1.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">love stories</p>
<h2 class="post__description__title">Alexa & Sebastian</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/wedding/1.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">weddings</p>
<h2 class="post__description__title">Nikkie & Sam</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/portraits/1.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">portraits</p>
<h2 class="post__description__title">Jackie Evan</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/albums/2.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">albums</p>
<h2 class="post__description__title">Architecture</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/lovestories/2.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">love stories</p>
<h2 class="post__description__title">John & Liza</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/portraits/2.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">portraits</p>
<h2 class="post__description__title">Alex Clare</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/albums/3.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">albums</p>
<h2 class="post__description__title">Tattoo</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/lovestories/3.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">love stories</p>
<h2 class="post__description__title">Michael & Ann</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/wedding/3.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">weddings</p>
<h2 class="post__description__title">Alex & Vika</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/portraits/3.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">portraits</p>
<h2 class="post__description__title">Ann Taylor</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
</div>
<p class="counter" id="allPhotosCounter"></p>
</div>
<div class="slide-wrapper">
<div class="slide" id="portraits">
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/portraits/1.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">portraits</p>
<h2 class="post__description__title">Jackie Evan</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/portraits/2.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">portraits</p>
<h2 class="post__description__title">Alex Clare</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/portraits/3.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">portraits</p>
<h2 class="post__description__title">Ann Taylor</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
</div>
<p class="counter" id="portraitsCounter"></p>
</div>
<div class="slide-wrapper">
<div class="slide" id="weddings">
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/wedding/1.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">weddings</p>
<h2 class="post__description__title">Nikkie & Sam</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/wedding/2.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">weddings</p>
<h2 class="post__description__title">Mary & Lesha</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/wedding/3.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">weddings</p>
<h2 class="post__description__title">Alex & Vika</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
</div>
<p class="counter" id="weddingsCounter"></p>
</div>
<div class="slide-wrapper">
<div class="slide" id="lovestories">
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/lovestories/1.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">love stories</p>
<h2 class="post__description__title">Alexa & Sebastian</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/lovestories/2.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">love stories</p>
<h2 class="post__description__title">John & Liza</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/lovestories/3.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">love stories</p>
<h2 class="post__description__title">Michael & Ann</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
</div>
<p class="counter" id="lovestoriesCounter"></p>
</div>
<div class="slide-wrapper">
<div class="slide" id="albums">
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/albums/2.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">albums</p>
<h2 class="post__description__title">Architecture</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/albums/1.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">albums</p>
<h2 class="post__description__title">Urban and cities</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
<article class="post-card">
<div class="post-link" href=""><img src="https://raw.githubusercontent.com/sedlukha/sedlukha.com/master/docs/portfolio/photo-slider/albums/3.jpg" alt=""/>
<div class="post__description">
<p class="post__description__category">albums</p>
<h2 class="post__description__title">Tattoo</h2>
<p class="post__description__excerpt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, ratione, necessitatibus!</p>
<p class="post__description__counter">13 photos</p>
</div>
</div>
</article>
</div>
<p class="counter" id="albumsCounter"></p>
</div>
</div>
</main>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://unpkg.com/flickity@2.0/dist/flickity.pkgd.min.js'></script>
<script >var categoriesFlkty = new Flickity( document.querySelector('.categories-list'), {
cellAlign: 'center',
prevNextButtons: false,
pageDots: false,
wrapAround: true,
});
var slidesFlkty = new Flickity( document.querySelector('.categories-slides'), {
cellAlign: 'center',
prevNextButtons: false,
pageDots: false,
wrapAround: true,
contain: true,
draggable: false,
asNavFor: '.categories-list',
imagesLoaded: true,
});
var postsFlickitySettings = {
cellAlign: 'center',
prevNextButtons: false,
pageDots: false,
wrapAround: true,
imagesLoaded: true
};
var allPhotos = document.querySelector('#all-photos');
var allPhotosFlickity = new Flickity(allPhotos, postsFlickitySettings );
var portraits = document.querySelector('#portraits');
var portraitsFlickity = new Flickity(portraits, postsFlickitySettings );
var weddings = document.querySelector('#weddings');
var weddingsFlickity = new Flickity(weddings, postsFlickitySettings );
var lovestories = document.querySelector('#lovestories');
var lovestoriesFlickity = new Flickity(lovestories, postsFlickitySettings );
var albums = document.querySelector('#albums');
var albumsFlickity = new Flickity(albums, postsFlickitySettings );
window.onload = function() {
document.body.classList.add('onload');
var notSelected = document.querySelectorAll('.post-card:not(.is-selected)');
var notSelectedLength = notSelected.length;
categoriesFlkty.on('dragStart', function(){
var isSelected = document.querySelector('.slide.is-selected .post-card.is-selected');
for (var i = 0; i < notSelectedLength; i++) {if (window.CP.shouldStopExecution(1)){break;}
var notSelected = document.querySelectorAll('.post-card:not(.is-selected)');
var notSelectedElem = notSelected[i];
notSelectedElem.classList.add('to85');
}
window.CP.exitedLoop(1);
});
var postslength = document.querySelectorAll('.post-card').length;
categoriesFlkty.on('settle', function(){
for (var i = 0; i < postslength; i++) {if (window.CP.shouldStopExecution(2)){break;}
var to85length = document.querySelectorAll('.to85').length;
var all = document.querySelectorAll('.post-card');
var allElem = all[i];
allElem.classList.remove('to85');
}
window.CP.exitedLoop(2);
});
// allPhotosCounter
var allPhotosCounter = document.querySelector('#allPhotosCounter');
function allPhotosCounterUpdate() {
allPhotosCounter.innerHTML = allPhotosFlickity.selectedIndex + 1 + '/' + allPhotosFlickity.cells.length;
}
allPhotosCounterUpdate();
allPhotosFlickity.on( 'select', allPhotosCounterUpdate);
// portraitsCounter
var portraitsCounter = document.querySelector('#portraitsCounter');
function portraitsCounterUpdate() {
portraitsCounter.innerHTML = portraitsFlickity.selectedIndex + 1 + '/' + portraitsFlickity.cells.length;
}
portraitsCounterUpdate();
portraitsFlickity.on( 'select', portraitsCounterUpdate);
// weddingsCounter
var weddingsCounter = document.querySelector('#weddingsCounter');
function weddingsCounterUpdate() {
weddingsCounter.innerHTML = weddingsFlickity.selectedIndex + 1 + '/' + weddingsFlickity.cells.length;
}
weddingsCounterUpdate();
weddingsFlickity.on( 'select', weddingsCounterUpdate);
// lovestoriesCounter
var lovestoriesCounter = document.querySelector('#lovestoriesCounter');
function lovestoriesCounterUpdate() {
lovestoriesCounter.innerHTML = lovestoriesFlickity.selectedIndex + 1 + '/' + lovestoriesFlickity.cells.length;
}
lovestoriesCounterUpdate();
lovestoriesFlickity.on( 'select', lovestoriesCounterUpdate);
// albumsCounter
var albumsCounter = document.querySelector('#albumsCounter');
function albumsCounterUpdate() {
albumsCounter.innerHTML = albumsFlickity.selectedIndex + 1 + '/' + albumsFlickity.cells.length;
}
albumsCounterUpdate();
albumsFlickity.on( 'select', albumsCounterUpdate);
};
//# sourceURL=pen.js
</script>
</body></html>
