<div class="c-carousel--latest" data-behaviour="Carousel">
<div class="js-frame w-full mx-auto relative whitespace-no-wrap flex flex-no-wrap max-w-card md:max-w-post">
<ul class="list-reset w-full text-center inline-block js-slide-container">
<li data-carousel-item class="c-carousel__item mx-2 w-full md:px-4 inline-block whitespace-normal">
<div class="c-card c-card--resp w-full max-w-card md:max-w-none relative">
<div class="c-card-clip c-card--resp__inner bg-white md:max-w-post md:mx-auto md:flex md:justify-center md:items-stretch">
<div class="md:w-6/12">
<img class="object-fit" src="/dist/images/exterior.jpg" alt="">
</div>
<div class="p-8 md:w-6/12 flex flex-col">
<div class="mb-4 leading-none">
<a href="#0" class="o-tag uppercase text-xs text-black-50 border tracking-wide border-black-40 px-2 h-sm-tag inline-flex items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Lifestyle</span></a>
</div>
<h4 class="text-lg leading-lg text-black-50 mb-4">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!
</h4>
<div class="mt-auto">
<a href="#0" class="o-btn o-btn--sm text-blush relative py-4 pr-3"><span class="block">See collaborations</span></a>
</div>
</div>
</div>
</div>
</li>
<li data-carousel-item class="c-carousel__item mx-2 w-full md:px-4 inline-block whitespace-normal">
<div class="c-card c-card--resp w-full max-w-card md:max-w-none relative">
<div class="c-card-clip c-card--resp__inner bg-white md:max-w-post md:mx-auto md:flex md:justify-center md:items-stretch">
<div class="md:w-6/12">
<img class="object-fit" src="/dist/images/923111-aesop.jpg" alt="">
</div>
<div class="p-8 md:w-6/12 flex flex-col">
<div class="mb-4 leading-none">
<a href="#0" class="o-tag uppercase text-xs text-black-50 border tracking-wide border-black-40 px-2 h-sm-tag inline-flex items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Lifestyle</span></a>
</div>
<h4 class="text-lg leading-lg text-black-50 mb-4">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!
</h4>
<div class="mt-auto">
<a href="#0" class="o-btn o-btn--sm text-blush relative py-4 pr-3"><span class="block">See collaborations</span></a>
</div>
</div>
</div>
</div>
</li>
<li data-carousel-item class="c-carousel__item mx-2 w-full md:px-4 inline-block whitespace-normal">
<div class="c-card c-card--resp w-full max-w-card md:max-w-none relative">
<div class="c-card-clip c-card--resp__inner bg-white md:max-w-post md:mx-auto md:flex md:justify-center md:items-stretch">
<div class="md:w-6/12">
<img class="object-fit" src="/dist/images/le-labo-boston-5.jpg" alt="">
</div>
<div class="p-8 md:w-6/12 flex flex-col">
<div class="mb-4 leading-none">
<a href="#0" class="o-tag uppercase text-xs text-black-50 border tracking-wide border-black-40 px-2 h-sm-tag inline-flex items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Lifestyle</span></a>
</div>
<h4 class="text-lg leading-lg text-black-50 mb-4">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!
</h4>
<div class="mt-auto">
<a href="#0" class="o-btn o-btn--sm text-blush relative py-4 pr-3"><span class="block">See collaborations</span></a>
</div>
</div>
</div>
</div>
</li>
</ul>
<button class="c-carousel__prev absolute z-10" data-carousel-prev>
<div class="o-icon flex items-center justify-center relative" >
<div class="o-icon__bg absolute pin bg-blush"></div>
<i class="icon icon--ui-prev">
<svg>
<use class="no-barba" xlink:href="#ui-prev"></use>
</svg>
</i>
</div>
</button>
<button class="c-carousel__next absolute z-10" data-carousel-next>
<div class="o-icon flex items-center justify-center relative" >
<div class="o-icon__bg absolute pin bg-blush"></div>
<i class="icon icon--ui-next">
<svg>
<use class="no-barba" xlink:href="#ui-next"></use>
</svg>
</i>
</div>
</button>
</div>
</div>
<div class="c-carousel--latest" data-behaviour="Carousel">
<div class="js-frame w-full mx-auto relative whitespace-no-wrap flex flex-no-wrap max-w-card md:max-w-post">
<ul class="list-reset w-full text-center inline-block js-slide-container">
{% for item in slides %}
<li data-carousel-item class="c-carousel__item mx-2 w-full md:px-4 inline-block whitespace-normal">
{% include '@card--responsive' with
{
heading: item.heading,
image: item.image,
tag: item.tag,
link: item.link
} %}
</li>
{% endfor %}
</ul>
<button class="c-carousel__prev absolute z-10" data-carousel-prev>
{% include '@icons' with { icon: 'ui-prev', color: 'blush'} %}
</button>
<button class="c-carousel__next absolute z-10" data-carousel-next>
{% include '@icons' with { icon: 'ui-next', color: 'blush'} %}
</button>
</div>
</div>
{
"siteTitle": "Asta Valentaite",
"copyright": "© 2017 Asta Valentaite. All rights reserved.",
"craft": {
"app": {
"config": {
"general": {
"custom": {
"objects": "/02-objects/",
"global": "../03-global/",
"components": "/04-components/",
"pages": "/05-pages/",
"macros": "/macros/",
"wrapper": "/wrapper/"
}
}
}
}
},
"sitemenu": [
{
"title": "About",
"slug": "/components/preview/about"
},
{
"title": "Fashion",
"slug": "/components/preview/press"
},
{
"title": "Beauty",
"slug": "/components/preview/post"
},
{
"title": "Lifestyle",
"slug": "/components/preview/vertical"
},
{
"title": "Collaborations",
"slug": "/components/preview/collaborations"
},
{
"title": "Press",
"slug": "/components/preview/press"
}
],
"images": [
{
"url": "/dist/images/asta-valentaite-71065242.jpg",
"alt": null
},
{
"url": "/dist/images/asta-valentaite-71065242.jpg",
"alt": null
},
{
"url": "/dist/images/asta-valentaite-71065242.jpg",
"alt": null
}
],
"slides": [
{
"tag": {
"url": "#0",
"text": "Lifestyle"
},
"heading": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!",
"image": {
"url": "/dist/images/exterior.jpg",
"alt": null
},
"link": {
"text": "See collaborations",
"url": "#0"
}
},
{
"tag": {
"url": "#0",
"text": "Lifestyle"
},
"heading": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!",
"image": {
"url": "/dist/images/923111-aesop.jpg",
"alt": null
},
"link": {
"text": "See collaborations",
"url": "#0"
}
},
{
"tag": {
"url": "#0",
"text": "Lifestyle"
},
"heading": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!",
"image": {
"url": "/dist/images/le-labo-boston-5.jpg",
"alt": null
},
"link": {
"text": "See collaborations",
"url": "#0"
}
}
]
}
.c-carousel__controls {
left: rem(10px);
right: rem(10px);
}
.c-carousel__prev,
.c-carousel__next {
top: 50%;
&:focus {
outline: 0;
.o-icons {
transform: scale(1.6);
}
}
}
.c-carousel__prev {
left: 0;
transform: translate3d(-50%, -50%, 0) scale(0.7);
@include mq($from: breakpoint('md')) {
transform: translate3d(-50%, -50%, 0);
}
@include mq($from: breakpoint('lg')) {
left: gutter(2);
}
@include mq($from: breakpoint('xl')) {
left: gutter(-6.5);
}
}
.c-carousel__next {
transform: translate3d(50%, -50%, 0) scale(0.7);
right: 0;
@include mq($from: breakpoint('md')) {
transform: translate3d(50%, -50%, 0);
}
@include mq($from: breakpoint('lg')) {
right: gutter(2);
}
@include mq($from: breakpoint('xl')) {
right: gutter(-6.5);
}
}
[data-carousel-pager] {
&.is-current {
@apply .text-blush;
}
}
.c-carousel {
width: 100%;
overflow: hidden;
}
.c-carousel__item {
flex: 1 0 100%;
}
.c-carousel--base {
.c-carousel__item {
transform: scale(0.8);
transition: transform 1200ms ease;
&.active,
&.is-expanded {
transform: scale(1);
}
}
}
.c-carousel--latest {
.c-carousel__item {
padding: 0 gutter(1);
opacity: 0.8;
transition: opacity 1200ms ease;
&.active,
&.is-expanded {
opacity: 1;
}
}
.c-carousel__prev {
display: none;
@include mq($from: breakpoint('sm')) {
display: block;
left: gutter(1);
}
@include mq($from: breakpoint('md')) {
left: gutter(1.5);
}
}
.c-carousel__next {
right: gutter(1);
@include mq($from: breakpoint('md')) {
display: block;
right: gutter(1.5);
}
}
}
.c-carousel--service {
position: relative;
width: 100%;
.c-carousel__item {
overflow: hidden;
padding: 0 gutter(1);
transition: opacity 200ms 100ms ease;
&.active,
&.is-expanded {
[data-carousel-image] {
opacity: 1;
transform: translate3d(0, 0, 0);
}
[data-carousel-content] {
transform: translate3d(-150px, 0, 0);
opacity: 1;
}
}
}
[data-carousel-image] {
transform: translate3d(100px, 0, 0);
opacity: 0;
transition: opacity 1200ms ease, transform 1200ms ease;
}
[data-carousel-content] {
position: absolute;
transform: translate3d(150px, 0, 0);
left: calc(100% * 0.6);
bottom: gutter(3);
opacity: 0;
transition: opacity 1200ms ease, transform 1200ms ease;
}
}
There are no notes for this item.