<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 class="glider-dots"></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": true
}
  • Content:
    @charset "UTF-8";
    
    // The Glider component 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-contain-single {
    	display: flex;
    	position: relative;
    	align-items: center;
    	margin-top: 0;
    	margin-bottom: rhythm(2);
    	padding-left: 0;
    	padding-right: 0;
    }
    
    .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;
    			}
    		}
    	}
    
    	@include m(single) {
    		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) {
    
    			figcaption {
    				margin-top: rhythm(1);
    			}
    			@include bp-up(lg) {
    				display: flex;
    				flex-direction: column-reverse;
    				margin-top: 0;
    			}
    		}
    	}
    }
    
    .glider-nav {
    	position: absolute;
    	top: 50%;
    	left: 0;
    	transform: translateY(-50%);
    	transition: background-color 0.25s ease-out;
    	user-select: none;
    
    	&: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-single-prev,
    .glider-single-next {
    	&.disabled {
    		display: none;
    
    		+ .glider-single-finish {
    			display: inline-flex;
    		}
    	}
    }
    
    .glider-single-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: 3.3 KB
  • Content:
    import Glider from 'glider-js';
    
    const gliderElementSingle = document.querySelector('.js-glider-single');
    
    if (gliderElementSingle) {
    	const GliderSingle = new Glider(gliderElementSingle, {
    		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');
    	let slideIndex = GliderSingle.getCurrentSlide();
    	let bounding = 0;
    
    	const scrollTop = () => {
    		siteMain.scrollIntoView();
    	};
    
    	if (nextBtns) {
    		[].forEach.call(nextBtns, (nextBtn) => {
    			nextBtn.addEventListener('click', () => {
    				GliderSingle.scrollItem(slideIndex += 1, true);
    
    				if (siteMain) {
    					bounding = siteMain.getBoundingClientRect();
    					if (bounding.top < 0) {
    						scrollTop();
    					}
    				}
    			});
    		});
    	}
    
    	if (prevBtns) {
    		[].forEach.call(prevBtns, (prevBtn) => {
    			prevBtn.addEventListener('click', () => {
    				GliderSingle.scrollItem(slideIndex -= 1, true);
    
    				if (siteMain) {
    					bounding = siteMain.getBoundingClientRect();
    					if (bounding.top < 0) {
    						scrollTop();
    					}
    				}
    			});
    		});
    	}
    
    	module.exports = GliderSingle;
    }
    
  • URL: /components/raw/glider/glider-single.js
  • Filesystem Path: src/molecules/glider/glider-single.js
  • Size: 1.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