Internetstiftelsen Styleguide

Glider: Hero 

<div class="u-m-t-0">
    <div class="glider-hero-contain u-p-x-0">
        <button type="button" class="a-paging glider-nav glider-nav--hero glider-prev js-glider-prev">
            <span class="u-visuallyhidden">Bakåt</span>
            <svg class="icon a-paging__icon">
                <use xlink:href="#icon-arrow-backwards"></use>
            </svg>
        </button>

        <div class="glider js-glider-hero" data-timeout="5000">
            <div class="glider-slide glider-slide--hero">
                <div class="glider-slide__text">
                    <span><a href="#" class="color-jade">Datadamer</a> – Kvinnorna som digitaliserade världen</span>
                </div>
                <img src="/assets/images/Reprogramming_ENIAC2.png" class="glider-slide__image" alt="Datadamer">
            </div>
            <div class="glider-slide glider-slide--hero">
                <div class="glider-slide__text">
                    <span><a href="#" class="color-lemon">Onlinespel</a> – Från moralpanik till e-sport</span>
                </div>
                <img src="/assets/images/Screen-Shot-2016-06-07-at-11.30.29.png" class="glider-slide__image" alt="Onlinespel">
            </div>
            <div class="glider-slide glider-slide--hero">
                <div class="glider-slide__text">
                    <span><a href="#" class="color-jade">Datadamer</a> – Kvinnorna som digitaliserade världen</span>
                </div>
                <img src="/assets/images/Reprogramming_ENIAC2.png" class="glider-slide__image" alt="Datadamer">
            </div>
            <div class="glider-slide glider-slide--hero">
                <div class="glider-slide__text">
                    <span><a href="#" class="color-lemon">Onlinespel</a> – Från moralpanik till e-sport</span>
                </div>
                <img src="/assets/images/Screen-Shot-2016-06-07-at-11.30.29.png" class="glider-slide__image" alt="Onlinespel">
            </div>
        </div>

        <button type="button" class="a-paging glider-nav glider-nav--hero glider-next js-glider-next">
            <span class="u-visuallyhidden">Framåt</span>
            <svg class="icon a-paging__icon">
                <use xlink:href="#icon-arrow-forwards"></use>
            </svg>
        </button>
    </div>
</div>
 
<div class="u-m-t-0">
	<div class="glider-hero-contain u-p-x-0">
		{{> @paging el="button" button_type="button" icon="arrow-backwards" additional_classes="glider-nav glider-nav--hero glider-prev js-glider-prev" text="Bakåt"}}

		<div class="glider js-glider-hero" data-timeout="5000">
			<div class="glider-slide glider-slide--hero">
				<div class="glider-slide__text">
					<span><a href="#" class="color-jade">Datadamer</a> – Kvinnorna som digitaliserade världen</span>
				</div>
				<img src="/assets/images/Reprogramming_ENIAC2.png" class="glider-slide__image" alt="Datadamer">
			</div>
			<div class="glider-slide glider-slide--hero">
				<div class="glider-slide__text">
					<span><a href="#" class="color-lemon">Onlinespel</a> – Från moralpanik till e-sport</span>
				</div>
				<img src="/assets/images/Screen-Shot-2016-06-07-at-11.30.29.png" class="glider-slide__image" alt="Onlinespel">
			</div>
			<div class="glider-slide glider-slide--hero">
				<div class="glider-slide__text">
					<span><a href="#" class="color-jade">Datadamer</a> – Kvinnorna som digitaliserade världen</span>
				</div>
				<img src="/assets/images/Reprogramming_ENIAC2.png" class="glider-slide__image" alt="Datadamer">
			</div>
			<div class="glider-slide glider-slide--hero">
				<div class="glider-slide__text">
					<span><a href="#" class="color-lemon">Onlinespel</a> – Från moralpanik till e-sport</span>
				</div>
				<img src="/assets/images/Screen-Shot-2016-06-07-at-11.30.29.png" class="glider-slide__image" alt="Onlinespel">
			</div>
		</div>

		{{> @paging el="button" button_type="button" icon="arrow-forwards" additional_classes="glider-nav glider-nav--hero glider-next js-glider-next" text="Framåt"}}
	</div>
</div>
 
{
  "dots": false,
  "single": true
}
  • Content: 
    @charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../vendor/grid/breakpoints' as breakpoint;

// NOTE: this compnent is dependant on the glider.scss component
// The Glider components is dependant on JS-classes and is therefore not namespaced

.glider-contain-course {
	display: flex;
	position: relative;
	align-items: center;
	margin-top: 0;
	margin-bottom: func.rhythm(2);
	padding-left: 0;
	padding-right: 0;
}

.glider-slide {
	@include bem.m(course) {
		margin-left: 0;
		padding-left: 0;
		padding-right: 0;

		&::after {
			display: none;
		}

		@include bem.e(navigation) {
			display: flex;
			justify-content: space-between;

			@include breakpoint.bp-up(lg) {
				justify-content: flex-start;
			}
		}

		@include bem.e(media) {

			&.zoom {
				pointer-events: none;

				@include breakpoint.bp-up(lg) {
					pointer-events: auto;
					cursor: zoom-in;
					transition: all 0.15s ease-out;
					position: relative;

					&::after {
						content: 'Förstora bilden';
						color: colors.$color-snow;
						padding: func.rhythm(1) func.rhythm(2) func.rhythm(1) func.rhythm(4);
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						border-top-left-radius: var.$border-radius;
						border-bottom-right-radius: var.$border-radius;
						width: auto;
						line-height: 1;
						height: var.$icon-size-large * 1.4;
						background-color: rgba(colors.$color-cyberspace, 0.8);
						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-search' viewbox='0 0 32 32' width='32' height='32' fill='%23ffffff'%3E%3Cpath d='M24,21.8l8,8L29.9,32l-8-8c-5.9,4.6-14.3,3.6-19-2.2S-0.7,7.6,5.1,2.9S19.3-0.7,24,5.1C27.9,10,27.9,16.9,24,21.8L24,21.8z M13.4,23.9c5.8,0,10.5-4.7,10.5-10.5S19.2,3,13.4,3S3,7.7,3,13.4S7.7,23.9,13.4,23.9z'/%3E%3C/svg%3E");
						background-position: func.rhythm(1) center;
						background-size: var.$icon-size-medium var.$icon-size-medium;
						background-repeat: no-repeat;

					}

					img {
						transition: all 0.25s ease-out;
					}

					// Image zooming
					&.is-zoomed {
						cursor: zoom-out !important;
						position: fixed;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						z-index: func.z_index(foreground);
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: rgba(colors.$color-cyberspace, 0.8);
						flex-direction: column;

						&::after {
							display: none;
						}

						img {
							cursor: zoom-out;
							max-width: 100%;
							max-height: 100vh;
							padding: func.rhythm(1);
							height: auto;
						}

						figcaption {
							max-width: func.to_rem(612px);
							text-align: center;
							color: colors.$color-snow;
							padding-left: func.rhythm(2);
							padding-right: func.rhythm(2);
							margin-bottom: 0 !important;
							padding-bottom: 0 !important;
						}
					}
				}
			}

			figcaption {
				margin-top: func.rhythm(1);
			}
			@include breakpoint.bp-up(lg) {
				display: flex;
				flex-direction: column-reverse;
				margin-top: 0;
			}
		}
	}
}
  • URL: /components/raw/glider/_glider-course.scss
  • Filesystem Path: src/molecules/glider/_glider-course.scss
  • Size: 3.3 KB
  • Content: 
    @charset "UTF-8";
@use "sass:color";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/baseline/plumber' as plumber;

// NOTE: this compnent is dependant on the glider.scss component
// The Glider components is dependant on JS-classes and is therefore not namespaced

.glider-hero-contain {
	display: flex;
	position: relative;
	align-items: center;
	margin: 0;

	@include bem.e(text) {
		position: absolute;
		top: func.rhythm(2);
		left: func.rhythm(2);
		z-index: func.z_index(background);
		padding-right: func.rhythm(2);
		max-width: 95%;

		@include breakpoint.bp-up(sm-xs) {
			top: func.rhythm(3);
			left: func.rhythm(3);
			padding-right: func.rhythm(3);
			max-width: 90%;
		}


		@include breakpoint.bp-up(sm) {
			top: func.rhythm(4);
			left: func.rhythm(4);
			padding-right: func.rhythm(4);
			max-width: 80%;
		}

		@include breakpoint.bp-up(md) {
			top: func.rhythm(6);
			left: func.rhythm(6);
			padding-right: func.rhythm(6);
			max-width: 70%;
		}

		@include breakpoint.bp-up(lg) {
			top: func.rhythm(7);
			left: func.rhythm(7);
			padding-right: 0;
			max-width: 60%;
		}

		@include breakpoint.bp-up(xl) {
			top: func.rhythm(8);
			left: func.rhythm(8);
		}

		> h1 {
			color: colors.$color-snow;

			> span {
				background-color: rgba(0,0,0,0.6);
			}

			@include plumber.plumber(
				var.$font-size: 2,
				$line-height: 3,
				$leading-bottom: 1
			);

			@include breakpoint.bp-up(sm) {
				@include plumber.plumber(
					var.$font-size: 2.3,
					$line-height: 3,
					$leading-bottom: 1
				);
			}

			@include breakpoint.bp-up(md) {
				@include plumber.plumber(
					var.$font-size: 3,
					$line-height: 4,
					$leading-bottom: 2
				);
			}

			@include breakpoint.bp-up(lg) {
				@include plumber.plumber(
					var.$font-size: 4,
					$line-height: 5,
					$leading-bottom: 2
				);
			}

			@include breakpoint.bp-up(xl) {
				@include plumber.plumber(
					var.$font-size: 5,
					$line-height: 6,
					$leading-bottom: 3
				);
			}
		}

		> p {
			color: colors.$color-snow;

			> span {
				background-color: rgba(0,0,0,0.6);
			}

			@include plumber.plumber(
				var.$font-size: 1.5,
				$line-height: 2,
			);

			@include breakpoint.bp-up(sm) {
				@include plumber.plumber(
					var.$font-size: 2,
					$line-height: 3,
				);
			}

			@include breakpoint.bp-up(lg) {
				@include plumber.plumber(
					var.$font-size: 2.5,
					$line-height: 3,
				);
			}

			@include breakpoint.bp-up(xl) {
				@include plumber.plumber(
					var.$font-size: 3,
					$line-height: 4,
				);
			}
		}
	}

	.glider {
		visibility: hidden;

		&[data-glider-initialized="true"] {
			visibility: visible;
		}
	}
}

.glider-slide {
	width: 100vw;

	@include bem.m(hero) {
		margin: 0;
		padding: 0;
		position: relative;

		&::after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(colors.$color-black, 0) 35%, rgba(colors.$color-black, 1) 100%);
		}

		@include bem.e(image) {
			display: block;
			object-fit: cover;
			object-position: 50% 50%;
			width: 100%;
			height: 100%;

			@include breakpoint.bp-up(sm) {
				min-height: func.to_rem(500px);
				max-height: 75vh;
			}
		}

		@include bem.e(text) {
			position: absolute;
			z-index: 1;
			bottom: func.rhythm(2);
			left: func.rhythm(2);
			padding-right: func.rhythm(2);
			color: colors.$color-snow;
			font-family: var.$font-family-bold;
			max-width: 95%;

			> span {
				//text-shadow: 0 0 20px rgba(0,0,0,0.8);

				> a {
					position: relative;
					z-index: 1;

					&:hover {
						text-decoration: none;
						color: colors.$color-cyberspace !important;
						text-shadow: none;
					}

					&::before {
						content: '';
						position: absolute;
						z-index: -1;
						width: 100%;
						height: 100%;
						background-color: colors.$color-snow;
						bottom: 0;
						left: 0;
						transform-origin: right;
						transform: scaleX(0);
						transition: transform .3s ease-in-out;
					}

					&:hover::before {
						transform-origin: left;
						transform: scaleX(1);
					}
				}
			}

			@include plumber.plumber(
				var.$font-size: 2.3,
				$line-height: 3,
				$leading-bottom: 0,
				$baseline: var.$headings-baseline
			);

			@include breakpoint.bp-up(sm-xs) {
				bottom: func.rhythm(3);
				left: func.rhythm(3);
				padding-right: func.rhythm(3);
				max-width: 90%;

				@include plumber.plumber(
					var.$font-size: 3,
					$line-height: 4,
					$leading-bottom: 0
				);
			}


			@include breakpoint.bp-up(sm) {
				bottom: func.rhythm(4);
				left: func.rhythm(4);
				padding-right: func.rhythm(4);
				max-width: 80%;

				@include plumber.plumber(
					var.$font-size: 4,
					$line-height: 5,
					$leading-bottom: 0
				);
			}

			@include breakpoint.bp-up(md) {
				bottom: func.rhythm(6);
				left: func.rhythm(6);
				padding-right: func.rhythm(6);
				max-width: 70%;

				@include plumber.plumber(
					var.$font-size: 5,
					$line-height: 6,
					$leading-bottom: 0
				);
			}

			@include breakpoint.bp-up(lg) {
				bottom: func.rhythm(7);
				left: func.rhythm(7);
				padding-right: 0;
				max-width: 60%;

				@include plumber.plumber(
					var.$font-size: 6,
					$line-height: 8,
					$leading-bottom: 0
				);
			}

			@include breakpoint.bp-up(xl) {
				bottom: func.rhythm(8);
				left: func.rhythm(8);

				@include plumber.plumber(
					var.$font-size: 7,
					$line-height: 9,
					$leading-bottom: 0
				);
			}
		}
	}
}

.glider-nav {
	transform: scale(0.7) translateY(-100%);

	@include breakpoint.bp-up(md) {
		transform: scale(1) translateY(-50%);
	}

	@include bem.m(hero) {
		&.disabled {
			display: none;
		}

		&.glider-prev {
			left: 0;

			@include breakpoint.bp-up(md) {
				left: func.rhythm(1);
			}

			@include breakpoint.bp-up(lg) {
				left: func.rhythm(2);
			}
		}

		&.glider-next {
			right: 0;

			@include breakpoint.bp-up(md) {
				right: func.rhythm(1);
			}

			@include breakpoint.bp-up(lg) {
				right: func.rhythm(2);
			}
		}
	}
}
  • URL: /components/raw/glider/_glider-hero.scss
  • Filesystem Path: src/molecules/glider/_glider-hero.scss
  • Size: 6.3 KB
  • Content: 
    @charset "UTF-8";
@use "sass:color";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../vendor/grid/breakpoints' as breakpoint;

// The Glider components is dependant on JS-classes and is therefore not namespaced

.glider-contain {
	display: flex;
	position: relative;
	align-items: center;
	margin-top: func.rhythm(2);
	margin-bottom: func.rhythm(2);
	padding-right: func.rhythm(8);
	padding-left: func.rhythm(8);
}

.glider {
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	//transform: translateZ(0);
	backface-visibility: hidden;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;

	&.draggable {
		cursor: grab;
		user-select: none;

		@include bem.b(glider-slide) {
			img {
				pointer-events: none;
				user-select: none;
			}
		}
	}

	&.drag {
		cursor: -webkit-grabbing;
		cursor: grabbing;
	}
}

.glider-track {
	display: flex;
	z-index: 1;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
	//transform: translateZ(0);
}

.glider-slide {
	position: relative;
	width: 100%;
	min-width: 150px;
	margin-left: 1px;
	padding: func.rhythm(2) 0;
	overflow: hidden;

	img:not([class]) {
		display: block;
		border-radius: var.$border-radius;
		width: 100%;
	}

	@include breakpoint.bp-only(sm) {
		padding-right: func.rhythm(2);
		padding-left: func.rhythm(2);
	}

	@include breakpoint.bp-up(lg) {
		padding-right: func.rhythm(3);
		padding-left: func.rhythm(3);
	}

	@include bem.m(stretch-items) {
		display: flex;
		align-items: stretch;
	}

	@include breakpoint.bp-up(lg) {
		&:not(.active) {
			&::after {
				content: '';
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				width: 1px;
				background-color: colors.$color-concrete;
			}
		}
	}
}

.glider-nav {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: func.z_index(middleground);
	transform: translateY(-50%);
	transition: background-color 0.25s ease-out;
	user-select: none;
	cursor: pointer;

	&:focus {
		background-color: colors.$color-snow;
	}

	svg {
		transition: opacity 0.25s ease-out;
		opacity: 1;
	}

	&.disabled {
		background-color: colors.$color-ash;
		box-shadow: 0 2px 5px color.adjust(colors.$color-granit, $lightness: 25%);
		pointer-events: none;

		svg {
			opacity: 0.2;
			fill: colors.$color-cyberspace;
		}
	}

	@include breakpoint.bp-up(sm) {
		left: func.rhythm(1);
	}
}

.glider-next {
	right: 0;
	left: auto;

	@include breakpoint.bp-up(sm) {
		right: func.rhythm(1);
	}
}

.glider-course-prev,
.glider-course-next {
	&.disabled {
		display: none;

		+ .glider-course-finish {
			display: inline-flex;
		}
	}
}

.glider-course-finish {
	display: none;
}

.glider-hide {
	opacity: 0;
}

.glider-dots {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	margin: 0 auto;
	padding: 0;
	user-select: none;
}

.glider-dot {
	display: block;
	width: func.to_rem(14px);
	height: func.to_rem(14px);
	margin: func.rhythm(0.5);
	padding: 0;
	border: 0;
	border-radius: 50%;
	outline: none;
	background: colors.$color-concrete;
	cursor: pointer;
	user-select: none;

	&:hover,
	&:focus,
	&.active {
		background: colors.$color-cyberspace;
	}
}
  • URL: /components/raw/glider/_glider.scss
  • Filesystem Path: src/molecules/glider/_glider.scss
  • Size: 3.3 KB
  • Content: 
    import Glider from 'glider-js';

const gliderElementCourse = document.querySelector('.js-glider-course');

if (gliderElementCourse) {
	const GliderCourse = new Glider(gliderElementCourse, {
		scrollLock: true,
		slidesToShow: 1,
		slidesToScroll: 1,
	});

	const nextBtns = document.querySelectorAll('.js-glider-next');
	const prevBtns = document.querySelectorAll('.js-glider-prev');
	const siteMain = document.querySelector('#siteMain');
	const zoomImages = document.querySelectorAll('.js-zoom.zoom');
	const youtubeVideos = document.querySelectorAll('[data-youtube]');
	let slideIndex = GliderCourse.getCurrentSlide();
	let bounding = 0;

	const scrollTop = () => {
		siteMain.scrollIntoView();
	};

	if (nextBtns) {
		[].forEach.call(nextBtns, (nextBtn) => {
			nextBtn.addEventListener('click', () => {
				GliderCourse.scrollItem(slideIndex += 1, true);

				[].forEach.call(youtubeVideos, (el) => el.youtube && el.youtube.pauseVideo());

				if (siteMain) {
					bounding = siteMain.getBoundingClientRect();
					if (bounding.top < 0) {
						scrollTop();
					}
				}
			});
		});
	}

	if (prevBtns) {
		[].forEach.call(prevBtns, (prevBtn) => {
			prevBtn.addEventListener('click', () => {
				GliderCourse.scrollItem(slideIndex -= 1, true);
				[].forEach.call(youtubeVideos, (el) => el.youtube && el.youtube.pauseVideo());

				if (siteMain) {
					bounding = siteMain.getBoundingClientRect();
					if (bounding.top < 0) {
						scrollTop();
					}
				}
			});
		});
	}

	if (zoomImages) {
		[].forEach.call(zoomImages, (zoomImage) => {
			zoomImage.addEventListener('click', () => {
				zoomImage.classList.toggle('is-zoomed');
			});
		});
	}

	module.exports = GliderCourse;
}
  • URL: /components/raw/glider/glider-course.js
  • Filesystem Path: src/molecules/glider/glider-course.js
  • Size: 1.7 KB
  • Content: 
    import Glider from 'glider-js';
import nodeAdded from '../../assets/js/nodeAdded';
export function initHeroGlider(node) {
	if (node.hasAttribute('data-glider-initialized')) {
		return;
	}

	const dataLayer = window._mtm || [];
	const gliderLinks = document.querySelectorAll('.glider-slide a');

	const GliderHero = new Glider(node, {
		scrollLock: true,
		slidesToShow: 1,
		slidesToScroll: 1,
		rewind: true,
		arrows: {
			prev: '.js-glider-prev',
			next: '.js-glider-next',
		},
	});

	node.setAttribute('data-glider-initialized', 'true');

	const autoplayDelay = node.dataset.timeout;

	if (autoplayDelay) {
		let autoplay = setInterval(() => {
			GliderHero.scrollItem('next');
		}, parseInt(autoplayDelay, 10));

		node.addEventListener('mouseover', () => {
			if (autoplay !== null) {
				clearInterval(autoplay);
				autoplay = null;
			}
		}, 0);

		node.addEventListener('mouseout', () => {
			if (autoplay === null) {
				autoplay = setInterval(() => {
					GliderHero.scrollItem('next');
				}, parseInt(autoplayDelay, 10));
			}
		}, 0);
	}

	document.querySelector('.js-glider-prev').addEventListener('click', () => {
		dataLayer.push({
			event: 'carousel',
			eventInfo: {
				category: 'carousel',
				action: 'click',
				label: 'arrow_left',
			},
		});
	});

	document.querySelector('.js-glider-next').addEventListener('click', () => {
		dataLayer.push({
			event: 'carousel',
			eventInfo: {
				category: 'carousel',
				action: 'click',
				label: 'arrow_right',
			},
		});
	});

	[].forEach.call(gliderLinks, (gliderLink) => {
		gliderLink.addEventListener('click', () => {
			const linkTarget = gliderLink.href;
			console.log(linkTarget);
			dataLayer.push({
				event: 'carousel',
				eventInfo: {
					category: 'carousel',
					action: 'click',
					label: linkTarget,
				},
			});
		});
	});
}

nodeAdded('.js-glider-hero', initHeroGlider);

const gliderElementHero = document.querySelector('.js-glider-hero');

if (gliderElementHero) {
	initHeroGlider(gliderElementHero);
}
  • URL: /components/raw/glider/glider-hero.js
  • Filesystem Path: src/molecules/glider/glider-hero.js
  • Size: 2 KB
  • Content: 
    import Glider from 'glider-js';

const gliderWrappers = document.querySelectorAll('.glider-contain');

if (gliderWrappers) {
	[].forEach.call(gliderWrappers, (gliderWrapper) => {
		const gliderElement = gliderWrapper.querySelector('.js-glider');
		const dots = gliderWrapper.classList.toString();
		const glider = new Glider(gliderElement, {
			scrollLock: true,
			slidesToShow: 1,
			slidesToScroll: 1,
			dots: `.${dots}+.glider-dots`,
			arrows: {
				prev: gliderWrapper.querySelector('.js-glider-prev'),
				next: gliderWrapper.querySelector('.js-glider-next'),
			},
			responsive: [
				{
					breakpoint: 961,
					settings: {
						slidesToShow: 3,
						slidesToScroll: 3,
					},
				},
				{
					breakpoint: 769,
					settings: {
						slidesToShow: 2,
						slidesToScroll: 2,
					},
				},
				{
					breakpoint: 469,
					settings: {
						slidesToShow: 1,
						slidesToScroll: 1,
					},
				},
			],
		});
		module.exports = glider;
	});
}
  • URL: /components/raw/glider/glider.js
  • Filesystem Path: src/molecules/glider/glider.js
  • Size: 961 Bytes

Glider

The Glider uses a vendor script named Glider. Read more about Glider:

The Glider component is dependant on JS-classes and is therefore not namespaced