Asta Valentaite

Carousel: Service 

<div class="c-carousel--service js_slider" data-behaviour="CarouselService">
    <ul class="list-reset flex justify-center mb-8">
        <li class="mx-4">
            <a href="#0" data-carousel-pager="0" class="text-black hover:text-blush text-body font-regular no-underline is-current">Personal Shopping</a>
        </li>
        <li class="mx-4">
            <a href="#0" data-carousel-pager="1" class="text-black hover:text-blush text-body font-regular no-underline ">Styling</a>
        </li>
        <li class="mx-4">
            <a href="#0" data-carousel-pager="2" class="text-black hover:text-blush text-body font-regular no-underline ">Modelling</a>
        </li>
        <li class="mx-4">
            <a href="#0" data-carousel-pager="3" class="text-black hover:text-blush text-body font-regular no-underline ">Consulting</a>
        </li>
        <li class="mx-4">
            <a href="#0" data-carousel-pager="4" class="text-black hover:text-blush text-body font-regular no-underline ">Endorsements</a>
        </li>
    </ul>
    <div class="frame js-frame flex flex-no-wrap relative whitespace-no-wrap">
        <ul class="list-reset slides flex w-full js-slide-container">
            <li data-carousel-item class="c-carousel__item relative flex flex-wrap w-full whitespace-normal">
                <div class="w-8/12 relative h-full">
                    <div class="relative w-full" style="padding-top: 62.5%">
                        <noscript>
			<img class="m-auto object-fit absolute pin" 
				src="/dist/images/asta-valentaite-71065242.jpg" 
				width="" 
				height="" 
				alt="" 
			/>
		</noscript>
                        <img class="m-auto object-fit lazyload absolute pin" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/dist/images/asta-valentaite-71065242.jpg" width="" height="" alt="" />
                    </div>

                </div>
                <div class="w-6/12 absolute z-10" data-carousel-content>
                    <div class="bg-white p-12 c-carousel__floater shadow-card hover:shadow-card-on" data-carousel-panel>
                        <h2 class="text-blush text-sm mb-2 font-regular tracking-wide uppercase leading-sm">Personal Shopping</h2>
                        <div class="text-black-50 text-body leading-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>
                        </div>
                    </div>
                </div>
            </li>
            <li data-carousel-item class="c-carousel__item relative flex flex-wrap w-full whitespace-normal">
                <div class="w-8/12 relative h-full">
                    <div class="relative w-full" style="padding-top: 62.5%">
                        <noscript>
			<img class="m-auto object-fit absolute pin" 
				src="/dist/images/asta-valentaite-71065242.jpg" 
				width="" 
				height="" 
				alt="" 
			/>
		</noscript>
                        <img class="m-auto object-fit lazyload absolute pin" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/dist/images/asta-valentaite-71065242.jpg" width="" height="" alt="" />
                    </div>

                </div>
                <div class="w-6/12 absolute z-10" data-carousel-content>
                    <div class="bg-white p-12 c-carousel__floater shadow-card hover:shadow-card-on" data-carousel-panel>
                        <h2 class="text-blush text-sm mb-2 font-regular tracking-wide uppercase leading-sm">Styling</h2>
                        <div class="text-black-50 text-body leading-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>
                        </div>
                    </div>
                </div>
            </li>
            <li data-carousel-item class="c-carousel__item relative flex flex-wrap w-full whitespace-normal">
                <div class="w-8/12 relative h-full">
                    <div class="relative w-full" style="padding-top: 62.5%">
                        <noscript>
			<img class="m-auto object-fit absolute pin" 
				src="/dist/images/asta-valentaite-71065242.jpg" 
				width="" 
				height="" 
				alt="" 
			/>
		</noscript>
                        <img class="m-auto object-fit lazyload absolute pin" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/dist/images/asta-valentaite-71065242.jpg" width="" height="" alt="" />
                    </div>

                </div>
                <div class="w-6/12 absolute z-10" data-carousel-content>
                    <div class="bg-white p-12 c-carousel__floater shadow-card hover:shadow-card-on" data-carousel-panel>
                        <h2 class="text-blush text-sm mb-2 font-regular tracking-wide uppercase leading-sm">Modelling</h2>
                        <div class="text-black-50 text-body leading-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>
                        </div>
                    </div>
                </div>
            </li>
            <li data-carousel-item class="c-carousel__item relative flex flex-wrap w-full whitespace-normal">
                <div class="w-8/12 relative h-full">
                    <div class="relative w-full" style="padding-top: 62.5%">
                        <noscript>
			<img class="m-auto object-fit absolute pin" 
				src="/dist/images/asta-valentaite-71065242.jpg" 
				width="" 
				height="" 
				alt="" 
			/>
		</noscript>
                        <img class="m-auto object-fit lazyload absolute pin" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/dist/images/asta-valentaite-71065242.jpg" width="" height="" alt="" />
                    </div>

                </div>
                <div class="w-6/12 absolute z-10" data-carousel-content>
                    <div class="bg-white p-12 c-carousel__floater shadow-card hover:shadow-card-on" data-carousel-panel>
                        <h2 class="text-blush text-sm mb-2 font-regular tracking-wide uppercase leading-sm">Consulting</h2>
                        <div class="text-black-50 text-body leading-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>
                        </div>
                    </div>
                </div>
            </li>
            <li data-carousel-item class="c-carousel__item relative flex flex-wrap w-full whitespace-normal">
                <div class="w-8/12 relative h-full">
                    <div class="relative w-full" style="padding-top: 62.5%">
                        <noscript>
			<img class="m-auto object-fit absolute pin" 
				src="/dist/images/asta-valentaite-71065242.jpg" 
				width="" 
				height="" 
				alt="" 
			/>
		</noscript>
                        <img class="m-auto object-fit lazyload absolute pin" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/dist/images/asta-valentaite-71065242.jpg" width="" height="" alt="" />
                    </div>

                </div>
                <div class="w-6/12 absolute z-10" data-carousel-content>
                    <div class="bg-white p-12 c-carousel__floater shadow-card hover:shadow-card-on" data-carousel-panel>
                        <h2 class="text-blush text-sm mb-2 font-regular tracking-wide uppercase leading-sm">Endorsements</h2>
                        <div class="text-black-50 text-body leading-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
 
{% import '@helpers' as h %}

<div class="c-carousel--service js_slider" data-behaviour="CarouselService">
	<ul class="list-reset flex justify-center mb-8">
		{% for slide in slides %}
			<li class="mx-4">
				<a href="#0" data-carousel-pager="{{ loop.index0 }}" class="text-black hover:text-blush text-body font-regular no-underline {% if loop.index0 == 0 %}is-current{% endif %}">{{ slide.heading }}</a>
			</li>
		{% endfor %}
	</ul>
	<div class="frame js-frame flex flex-no-wrap relative whitespace-no-wrap">
		<ul class="list-reset slides flex w-full js-slide-container">
			{% for slide in slides %}
				<li data-carousel-item class="c-carousel__item relative flex flex-wrap w-full whitespace-normal">
					<div class="w-8/12 relative h-full">
						{{ h.image(slide.image, '8:5', 'm-auto object-fit') }}
					</div>
					<div class="w-6/12 absolute z-10" data-carousel-content>
						<div class="bg-white p-12 c-carousel__floater shadow-card hover:shadow-card-on" data-carousel-panel>
							<h2 class="text-blush text-sm mb-2 font-regular tracking-wide uppercase leading-sm">{{ slide.heading }}</h2>
							<div class="text-black-50 text-body leading-body">
								{{ slide.body }}
							</div>
						</div>
					</div>
				</li>
			{% endfor %}
		</ul>
	</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": [
    {
      "image": {
        "url": "/dist/images/asta-valentaite-71065242.jpg",
        "alt": null
      },
      "heading": "Personal Shopping",
      "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>"
    },
    {
      "image": {
        "url": "/dist/images/asta-valentaite-71065242.jpg",
        "alt": null
      },
      "heading": "Styling",
      "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>"
    },
    {
      "image": {
        "url": "/dist/images/asta-valentaite-71065242.jpg",
        "alt": null
      },
      "heading": "Modelling",
      "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>"
    },
    {
      "image": {
        "url": "/dist/images/asta-valentaite-71065242.jpg",
        "alt": null
      },
      "heading": "Consulting",
      "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>"
    },
    {
      "image": {
        "url": "/dist/images/asta-valentaite-71065242.jpg",
        "alt": null
      },
      "heading": "Endorsements",
      "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>"
    }
  ]
}
  • Content: 
    .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;
	}
}
  • URL: /components/raw/carousel/_carousel.scss
  • Filesystem Path: src/templates/04-components/carousel/_carousel.scss
  • Size: 2.3 KB

There are no notes for this item.