<div class="c-carousel c-carousel--base wrapper overflow-visible" data-behaviour="Carousel">
<div class="js-frame w-full mx-auto relative whitespace-no-wrap flex flex-no-wrap max-w-xl js_frame flex justify-center items-center">
<ul class="list-reset text-center inline-block w-full js-slide-container">
<li class="c-carousel__item w-full lg:px-8 m-auto inline-block" data-carousel-item>
<div class="relative w-full" style="padding-top: 62.5%">
<noscript>
<img class="c-carousel__img shadow-card hover:shadow-card-on m-auto absolute pin"
src="/dist/images/asta-valentaite-71065242.jpg"
width=""
height=""
alt=""
/>
</noscript>
<img class="c-carousel__img shadow-card hover:shadow-card-on m-auto lazyload absolute pin" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/dist/images/asta-valentaite-71065242.jpg" width="" height="" alt=""
/>
</div>
</li>
<li class="c-carousel__item w-full lg:px-8 m-auto inline-block" data-carousel-item>
<div class="relative w-full" style="padding-top: 62.5%">
<noscript>
<img class="c-carousel__img shadow-card hover:shadow-card-on m-auto absolute pin"
src="/dist/images/asta-valentaite-71065242.jpg"
width=""
height=""
alt=""
/>
</noscript>
<img class="c-carousel__img shadow-card hover:shadow-card-on m-auto lazyload absolute pin" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/dist/images/asta-valentaite-71065242.jpg" width="" height="" alt=""
/>
</div>
</li>
<li class="c-carousel__item w-full lg:px-8 m-auto inline-block" data-carousel-item>
<div class="relative w-full" style="padding-top: 62.5%">
<noscript>
<img class="c-carousel__img shadow-card hover:shadow-card-on m-auto absolute pin"
src="/dist/images/asta-valentaite-71065242.jpg"
width=""
height=""
alt=""
/>
</noscript>
<img class="c-carousel__img shadow-card hover:shadow-card-on m-auto lazyload absolute pin" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/dist/images/asta-valentaite-71065242.jpg" width="" height="" alt=""
/>
</div>
</li>
</ul>
<button class="c-carousel__prev absolute z-10">
<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">
<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>
{% import '@helpers' as h %}
<div class="c-carousel c-carousel--base wrapper overflow-visible" data-behaviour="Carousel">
<div class="js-frame w-full mx-auto relative whitespace-no-wrap flex flex-no-wrap max-w-xl js_frame flex justify-center items-center">
<ul class="list-reset text-center inline-block w-full js-slide-container">
{% for image in images %}
<li class="c-carousel__item w-full lg:px-8 m-auto inline-block" data-carousel-item>
{{ h.image(image, '8:5', 'c-carousel__img shadow-card hover:shadow-card-on m-auto') }}
</li>
{% endfor %}
</ul>
<button class="c-carousel__prev absolute z-10">
{% include '@icons' with { icon: 'ui-prev', color: 'blush'} %}
</button>
<button class="c-carousel__next absolute z-10">
{% 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
}
]
}
.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.