<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
}
@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;
}
}
}
}
@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(
$font-size: 2,
$line-height: 3,
$leading-bottom: 1
);
@include breakpoint.bp-up(sm) {
@include plumber.plumber(
$font-size: 2.3,
$line-height: 3,
$leading-bottom: 1
);
}
@include breakpoint.bp-up(md) {
@include plumber.plumber(
$font-size: 3,
$line-height: 4,
$leading-bottom: 2
);
}
@include breakpoint.bp-up(lg) {
@include plumber.plumber(
$font-size: 4,
$line-height: 5,
$leading-bottom: 2
);
}
@include breakpoint.bp-up(xl) {
@include plumber.plumber(
$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(
$font-size: 1.5,
$line-height: 2,
);
@include breakpoint.bp-up(sm) {
@include plumber.plumber(
$font-size: 2,
$line-height: 3,
);
}
@include breakpoint.bp-up(lg) {
@include plumber.plumber(
$font-size: 2.5,
$line-height: 3,
);
}
@include breakpoint.bp-up(xl) {
@include plumber.plumber(
$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(
$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(
$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(
$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(
$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(
$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(
$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);
}
}
}
}
@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;
}
}
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;
}
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);
}
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;
});
}
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