Asta Valentaite

Carousel 

<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
    }
  ]
}
  • 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.