<div class="wrapper u-p-x-0">
    <div class="grid-18">
        <h2 class="alpha">Så tycker våra kunder</h2>
    </div>
    <div class="glider-contain">
        <button type="button" class="a-paging glider-nav 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">
            <div class="glider-slide glider-slide--stretch-items">
                <blockquote class="a-quote">
                    &quot;I’ve never been to a virtual conference, but Confab online was 100x better than any other conference I’ve been to before—polished and professional, yet completely human.&quot;
                    <footer class="a-quote__footer">
                        <figure>
                            <img class="a-quote__avatar" src="/assets/images/author.png" alt="citatbild">
                        </figure>
                        Paloma Picasso
                    </footer>
                </blockquote>
            </div>
            <div class="glider-slide glider-slide--stretch-items">
                <blockquote class="a-quote">
                    &quot;All I can say is wow and well done. For this first-timer, you made the Confab online experience memorable, phenomenal, and perspective-enhancing.&quot;
                    <footer class="a-quote__footer">
                        <figure>
                            <img class="a-quote__avatar" src="/assets/images/author.png" alt="citatbild">
                        </figure>
                        Alan Wickerman
                    </footer>
                </blockquote>
            </div>
            <div class="glider-slide glider-slide--stretch-items">
                <blockquote class="a-quote">
                    &quot;I’m feeling so rejuvenated after going to virtual Confab! I met so many like-minded content people. Thanks to Brain Traffic for pulling this global group of experts together!&quot;
                    <footer class="a-quote__footer">
                        <figure>
                            <img class="a-quote__avatar" src="/assets/images/author.png" alt="citatbild">
                        </figure>
                        Jaqueline Harris
                    </footer>
                </blockquote>
            </div>
            <div class="glider-slide glider-slide--stretch-items">
                <blockquote class="a-quote">
                    &quot;I was really impressed with how well Confab online was organized and executed. A ton of great speakers and valuable large/small group discussions. A+, two thumbs up, and five stars.&quot;
                    <footer class="a-quote__footer">
                        <figure>
                            <img class="a-quote__avatar" src="/assets/images/author.png" alt="citatbild">
                        </figure>
                        Rutger Jönåker
                    </footer>
                </blockquote>
            </div>
            <div class="glider-slide glider-slide--stretch-items">
                <blockquote class="a-quote">
                    &quot;I’ve never been to a virtual conference, but Confab online was 100x better than any other conference I’ve been to before—polished and professional, yet completely human.&quot;
                    <footer class="a-quote__footer">
                        <figure>
                            <img class="a-quote__avatar" src="/assets/images/author.png" alt="citatbild">
                        </figure>
                        Ragnar Tvålfager
                    </footer>
                </blockquote>
            </div>
            <div class="glider-slide glider-slide--stretch-items">
                <blockquote class="a-quote">
                    &quot;All I can say is wow and well done. For this first-timer, you made the Confab online experience memorable, phenomenal, and perspective-enhancing.&quot;
                    <footer class="a-quote__footer">
                        <figure>
                            <img class="a-quote__avatar" src="/assets/images/author.png" alt="citatbild">
                        </figure>
                        Marielle Jonston
                    </footer>
                </blockquote>
            </div>
            <div class="glider-slide glider-slide--stretch-items">
                <blockquote class="a-quote">
                    &quot;I’m feeling so rejuvenated after going to virtual Confab! I met so many like-minded content people. Thanks to Brain Traffic for pulling this global group of experts together!&quot;
                    <footer class="a-quote__footer">
                        <figure>
                            <img class="a-quote__avatar" src="/assets/images/author.png" alt="citatbild">
                        </figure>
                        Jaqueline Harris
                    </footer>
                </blockquote>
            </div>
            <div class="glider-slide glider-slide--stretch-items">
                <blockquote class="a-quote">
                    &quot;I was really impressed with how well Confab online was organized and executed. A ton of great speakers and valuable large/small group discussions. A+, two thumbs up, and five stars.&quot;
                    <footer class="a-quote__footer">
                        <figure>
                            <img class="a-quote__avatar" src="/assets/images/author.png" alt="citatbild">
                        </figure>
                        Rutger Jönåker
                    </footer>
                </blockquote>
            </div>
        </div>

        <button type="button" class="a-paging glider-nav 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="wrapper u-p-x-0">
	<div class="grid-18">
		<h2 class="alpha">Så tycker våra kunder</h2>
	</div>
	<div class="glider-contain">
		{{> @paging el="button" button_type="button" icon="arrow-backwards" additional_classes="glider-nav js-glider-prev" text="Bakåt"}}
			<div class="glider js-glider">
				<div class="glider-slide glider-slide--stretch-items">
					{{> @quote quotee="Paloma Picasso" quote='"I’ve never been to a virtual conference, but Confab online was 100x better than any other conference I’ve been to before—polished and professional, yet completely human."'}}
				</div>
				<div class="glider-slide glider-slide--stretch-items">
					{{> @quote quotee="Alan Wickerman" quote='"All I can say is wow and well done. For this first-timer, you made the Confab online experience memorable, phenomenal, and perspective-enhancing."'}}
				</div>
				<div class="glider-slide glider-slide--stretch-items">
					{{> @quote quotee="Jaqueline Harris" quote='"I’m feeling so rejuvenated after going to virtual Confab! I met so many like-minded content people. Thanks to Brain Traffic for pulling this global group of experts together!"'}}
				</div>
				<div class="glider-slide glider-slide--stretch-items">
					{{> @quote quotee="Rutger Jönåker" quote='"I was really impressed with how well Confab online was organized and executed. A ton of great speakers and valuable large/small group discussions. A+, two thumbs up, and five stars."'}}
				</div>
				<div class="glider-slide glider-slide--stretch-items">
					{{> @quote quotee="Ragnar Tvålfager" quote='"I’ve never been to a virtual conference, but Confab online was 100x better than any other conference I’ve been to before—polished and professional, yet completely human."'}}
				</div>
				<div class="glider-slide glider-slide--stretch-items">
					{{> @quote quotee="Marielle Jonston" quote='"All I can say is wow and well done. For this first-timer, you made the Confab online experience memorable, phenomenal, and perspective-enhancing."'}}
				</div>
				<div class="glider-slide glider-slide--stretch-items">
					{{> @quote quotee="Jaqueline Harris" quote='"I’m feeling so rejuvenated after going to virtual Confab! I met so many like-minded content people. Thanks to Brain Traffic for pulling this global group of experts together!"'}}
				</div>
				<div class="glider-slide glider-slide--stretch-items">
					{{> @quote quotee="Rutger Jönåker" quote='"I was really impressed with how well Confab online was organized and executed. A ton of great speakers and valuable large/small group discussions. A+, two thumbs up, and five stars."'}}
				</div>
			</div>

			{{> @paging el="button" button_type="button" icon="arrow-forwards" additional_classes="glider-nav glider-next js-glider-next" text="Framåt"}}
	</div>
	{{#if dots}}
	<div class="glider-dots"></div>
	{{/if}}
</div>
{
  "dots": false
}
  • Content:
    @charset "UTF-8";
    
    // 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: rhythm(2);
    	padding-left: 0;
    	padding-right: 0;
    }
    
    .glider-slide {
    	@include m(course) {
    		margin-left: 0;
    		padding-left: 0;
    		padding-right: 0;
    
    		&::after {
    			display: none;
    		}
    
    		@include e(navigation) {
    			display: flex;
    			justify-content: space-between;
    
    			@include bp-up(lg) {
    				justify-content: flex-start;
    			}
    		}
    
    		@include e(media) {
    
    			&.zoom {
    				pointer-events: none;
    
    				@include bp-up(lg) {
    					pointer-events: auto;
    					cursor: zoom-in;
    					transition: all 0.15s ease-out;
    					position: relative;
    
    					&::after {
    						content: 'Förstora bilden';
    						color: $color-snow;
    						padding: rhythm(1) rhythm(2) rhythm(1) rhythm(4);
    						display: block;
    						position: absolute;
    						top: 0;
    						left: 0;
    						border-top-left-radius: $border-radius;
    						border-bottom-right-radius: $border-radius;
    						width: auto;
    						line-height: 1;
    						height: $icon-size-large * 1.4;
    						background-color: rgba($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: rhythm(1) center;
    						background-size: $icon-size-medium $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: z_index(foreground);
    						display: flex;
    						align-items: center;
    						justify-content: center;
    						background-color: rgba($color-cyberspace, 0.8);
    						flex-direction: column;
    
    						&::after {
    							display: none;
    						}
    
    						img {
    							cursor: zoom-out;
    							max-width: 100%;
    							max-height: 100vh;
    							padding: rhythm(1);
    							height: auto;
    						}
    
    						figcaption {
    							max-width: rem(612px);
    							text-align: center;
    							color: $color-snow;
    							padding-left: rhythm(2);
    							padding-right: rhythm(2);
    							margin-bottom: 0 !important;
    							padding-bottom: 0 !important;
    						}
    					}
    				}
    			}
    
    			figcaption {
    				margin-top: rhythm(1);
    			}
    			@include 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: 2.8 KB
  • Content:
    @charset "UTF-8";
    
    // 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 e(text) {
    		position: absolute;
    		top: rhythm(2);
    		left: rhythm(2);
    		z-index: z_index(background);
    		padding-right: rhythm(2);
    		max-width: 95%;
    
    		@include bp-up(sm-xs) {
    			top: rhythm(3);
    			left: rhythm(3);
    			padding-right: rhythm(3);
    			max-width: 90%;
    		}
    
    
    		@include bp-up(sm) {
    			top: rhythm(4);
    			left: rhythm(4);
    			padding-right: rhythm(4);
    			max-width: 80%;
    		}
    
    		@include bp-up(md) {
    			top: rhythm(6);
    			left: rhythm(6);
    			padding-right: rhythm(6);
    			max-width: 70%;
    		}
    
    		@include bp-up(lg) {
    			top: rhythm(7);
    			left: rhythm(7);
    			padding-right: 0;
    			max-width: 60%;
    		}
    
    		@include bp-up(xl) {
    			top: rhythm(8);
    			left: rhythm(8);
    		}
    
    		> h1 {
    			color: $color-snow;
    
    			> span {
    				background-color: rgba(0,0,0,0.6);
    			}
    
    			@include plumber(
    				$font-size: 2,
    				$line-height: 3,
    				$leading-bottom: 1
    			);
    
    			@include bp-up(sm) {
    				@include plumber(
    					$font-size: 2.3,
    					$line-height: 3,
    					$leading-bottom: 1
    				);
    			}
    
    			@include bp-up(md) {
    				@include plumber(
    					$font-size: 3,
    					$line-height: 4,
    					$leading-bottom: 2
    				);
    			}
    
    			@include bp-up(lg) {
    				@include plumber(
    					$font-size: 4,
    					$line-height: 5,
    					$leading-bottom: 2
    				);
    			}
    
    			@include bp-up(xl) {
    				@include plumber(
    					$font-size: 5,
    					$line-height: 6,
    					$leading-bottom: 3
    				);
    			}
    		}
    
    		> p {
    			color: $color-snow;
    
    			> span {
    				background-color: rgba(0,0,0,0.6);
    			}
    
    			@include plumber(
    				$font-size: 1.5,
    				$line-height: 2,
    			);
    
    			@include bp-up(sm) {
    				@include plumber(
    					$font-size: 2,
    					$line-height: 3,
    				);
    			}
    
    			@include bp-up(lg) {
    				@include plumber(
    					$font-size: 2.5,
    					$line-height: 3,
    				);
    			}
    
    			@include bp-up(xl) {
    				@include plumber(
    					$font-size: 3,
    					$line-height: 4,
    				);
    			}
    		}
    	}
    }
    
    .glider-slide {
    	width: 100vw;
    
    	@include 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($color-black, 0) 35%, rgba($color-black, 1) 100%);
    		}
    
    		@include e(image) {
    			display: block;
    			object-fit: cover;
    			object-position: 50% 50%;
    			width: 100%;
    			height: 100%;
    
    			@include bp-up(sm) {
    				min-height: rem(500px);
    				max-height: 75vh;
    			}
    		}
    
    		@include e(text) {
    			position: absolute;
    			z-index: 1;
    			bottom: rhythm(2);
    			left: rhythm(2);
    			padding-right: rhythm(2);
    			color: $color-snow;
    			font-family: $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: $color-cyberspace !important;
    						text-shadow: none;
    					}
    
    					&::before {
    						content: '';
    						position: absolute;
    						z-index: -1;
    						width: 100%;
    						height: 100%;
    						background-color: $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(
    				$font-size: 2.3,
    				$line-height: 3,
    				$leading-bottom: 0,
    				$baseline: $headings-baseline
    			);
    
    			@include bp-up(sm-xs) {
    				bottom: rhythm(3);
    				left: rhythm(3);
    				padding-right: rhythm(3);
    				max-width: 90%;
    
    				@include plumber(
    					$font-size: 3,
    					$line-height: 4,
    					$leading-bottom: 0
    				);
    			}
    
    
    			@include bp-up(sm) {
    				bottom: rhythm(4);
    				left: rhythm(4);
    				padding-right: rhythm(4);
    				max-width: 80%;
    
    				@include plumber(
    					$font-size: 4,
    					$line-height: 5,
    					$leading-bottom: 0
    				);
    			}
    
    			@include bp-up(md) {
    				bottom: rhythm(6);
    				left: rhythm(6);
    				padding-right: rhythm(6);
    				max-width: 70%;
    
    				@include plumber(
    					$font-size: 5,
    					$line-height: 6,
    					$leading-bottom: 0
    				);
    			}
    
    			@include bp-up(lg) {
    				bottom: rhythm(7);
    				left: rhythm(7);
    				padding-right: 0;
    				max-width: 60%;
    
    				@include plumber(
    					$font-size: 6,
    					$line-height: 8,
    					$leading-bottom: 0
    				);
    			}
    
    			@include bp-up(xl) {
    				bottom: rhythm(8);
    				left: rhythm(8);
    				max-width: 50%;
    
    				@include plumber(
    					$font-size: 7,
    					$line-height: 9,
    					$leading-bottom: 0
    				);
    			}
    
    			@include bp-up(xxl) {
    				max-width: 45%;
    			}
    		}
    	}
    }
    
    .glider-nav {
    	transform: scale(0.7) translateY(-100%);
    
    	@include bp-up(md) {
    		transform: scale(1) translateY(0);
    	}
    
    	@include m(hero) {
    		&.disabled {
    			display: none;
    		}
    
    		&.glider-prev {
    			left: 0;
    
    			@include bp-up(md) {
    				left: rhythm(1);
    			}
    
    			@include bp-up(lg) {
    				left: rhythm(2);
    			}
    		}
    
    		&.glider-next {
    			right: 0;
    
    			@include bp-up(md) {
    				right: rhythm(1);
    			}
    
    			@include bp-up(lg) {
    				right: rhythm(2);
    			}
    		}
    	}
    }
    
  • URL: /components/raw/glider/_glider-hero.scss
  • Filesystem Path: src/molecules/glider/_glider-hero.scss
  • Size: 5.2 KB
  • Content:
    @charset "UTF-8";
    
    // The Glider components is dependant on JS-classes and is therefore not namespaced
    
    .glider-contain {
    	display: flex;
    	position: relative;
    	align-items: center;
    	margin-top: rhythm(2);
    	margin-bottom: rhythm(2);
    	padding-right: rhythm(8);
    	padding-left: 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 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: rhythm(2) 0;
    	overflow: hidden;
    
    	img:not([class]) {
    		display: block;
    		border-radius: $border-radius;
    		width: 100%;
    	}
    
    	@include bp-only(sm) {
    		padding-right: rhythm(2);
    		padding-left: rhythm(2);
    	}
    
    	@include bp-up(lg) {
    		padding-right: rhythm(3);
    		padding-left: rhythm(3);
    	}
    
    	@include m(stretch-items) {
    		display: flex;
    		align-items: stretch;
    	}
    
    	@include bp-up(lg) {
    		&:not(.active) {
    			&::after {
    				content: '';
    				position: absolute;
    				top: 0;
    				bottom: 0;
    				left: 0;
    				width: 1px;
    				background-color: $color-concrete;
    			}
    		}
    	}
    }
    
    .glider-nav {
    	position: absolute;
    	top: 50%;
    	left: 0;
    	z-index: z_index(middleground);
    	transform: translateY(-50%);
    	transition: background-color 0.25s ease-out;
    	user-select: none;
    	cursor: pointer;
    
    	&:focus {
    		background-color: $color-snow;
    	}
    
    	svg {
    		transition: opacity 0.25s ease-out;
    		opacity: 1;
    	}
    
    	&.disabled {
    		background-color: $color-ash;
    		box-shadow: 0 2px 5px lighten($color-granit, 25%);
    		pointer-events: none;
    
    		svg {
    			opacity: 0.2;
    			fill: $color-cyberspace;
    		}
    	}
    
    	@include bp-up(sm) {
    		left: rhythm(1);
    	}
    }
    
    .glider-next {
    	right: 0;
    	left: auto;
    
    	@include bp-up(sm) {
    		right: 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: rem(14px);
    	height: rem(14px);
    	margin: rhythm(0.5);
    	padding: 0;
    	border: 0;
    	border-radius: 50%;
    	outline: none;
    	background: $color-concrete;
    	cursor: pointer;
    	user-select: none;
    
    	&:hover,
    	&:focus,
    	&.active {
    		background: $color-cyberspace;
    	}
    }
    
  • URL: /components/raw/glider/_glider.scss
  • Filesystem Path: src/molecules/glider/_glider.scss
  • Size: 2.8 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');
    	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);
    
    				if (siteMain) {
    					bounding = siteMain.getBoundingClientRect();
    					if (bounding.top < 0) {
    						scrollTop();
    					}
    				}
    			});
    		});
    	}
    
    	if (prevBtns) {
    		[].forEach.call(prevBtns, (prevBtn) => {
    			prevBtn.addEventListener('click', () => {
    				GliderCourse.scrollItem(slideIndex -= 1, true);
    
    				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.5 KB
  • Content:
    import Glider from 'glider-js';
    
    const gliderElementHero = document.querySelector('.js-glider-hero');
    
    if (gliderElementHero) {
    	const GliderHero = new Glider(gliderElementHero, {
    		scrollLock: true,
    		slidesToShow: 1,
    		slidesToScroll: 1,
    		rewind: true,
    		arrows: {
    			prev: '.js-glider-prev',
    			next: '.js-glider-next',
    		},
    	});
    
    	const autoplayDelay = gliderElementHero.dataset.timeout;
    
    	if (autoplayDelay) {
    		let autoplay = setInterval(() => {
    			GliderHero.scrollItem('next');
    		}, autoplayDelay);
    
    		gliderElementHero.addEventListener('mouseover', () => {
    			if (autoplay !== null) {
    				clearInterval(autoplay);
    				autoplay = null;
    			}
    		}, 0);
    
    		gliderElementHero.addEventListener('mouseout', () => {
    			if (autoplay === null) {
    				autoplay = setInterval(() => {
    					GliderHero.scrollItem('next');
    				}, autoplayDelay);
    			}
    		}, 0);
    	}
    
    	module.exports = GliderHero;
    }
    
  • URL: /components/raw/glider/glider-hero.js
  • Filesystem Path: src/molecules/glider/glider-hero.js
  • Size: 889 Bytes
  • 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