<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Paraglider examples</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Paraglider</h1>
<h2>An API driven slider</h2>
<p>Paraglider is hosted on <a href="https://github.com/pixelass/paraglider" target="_blank">Github</a></p>
</header>
<main>
<article>
<div class="glider">
<nav class="pagers"><a class="previousButton" href="#">
<svg style="width:1em;height:1em;" viewBox="0 0 24 24">
<path fill="currentcolor" d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"></path>
</svg></a><a class="nextButton" href="#">
<svg style="width:1em;height:1em;" viewBox="0 0 24 24">
<path fill="currentcolor" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path>
</svg></a></nav>
<nav class="dots"><a class="dot" href="#"></a><a class="dot" href="#"></a><a class="dot" href="#"></a><a class="dot" href="#"></a><a class="dot" href="#"></a>
</nav>
<section class="slides">
<article class="slide" style="background-image:url("//loremflickr.com/750/500/1");background-color:hsl(72, 70%, 70%);">
</article>
<article class="slide" style="background-image:url("//loremflickr.com/750/500/2");background-color:hsl(144, 70%, 70%);">
</article>
<article class="slide" style="background-image:url("//loremflickr.com/750/500/3");background-color:hsl(216, 70%, 70%);">
</article>
<article class="slide" style="background-image:url("//loremflickr.com/750/500/4");background-color:hsl(288, 70%, 70%);">
</article>
<article class="slide" style="background-image:url("//loremflickr.com/750/500/5");background-color:hsl(360, 70%, 70%);">
</article>
</section>
</div>
</article>
</main>
<script src='http://cdn.rawgit.com/pixelass/paraglider/v2.2.0/dist/paraglider.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/pixelass/paraglider-examples-bRaVyg */
body {
margin: 0;
font-family: sans-serif;
min-width: 320px;
overflow-x: hidden;
overflow-y: auto;
background: #222;
color: #fff;
}
main {
margin: auto;
}
a {
color: #fff;
font-weight: bolder
}
a:hover {
color: #f00;
}
*,
*::before,
*::after {
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
:root { /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
.glider {
position: relative;
width: 100vw;
height: 66.66667vw;
max-width: 750px;
max-height: 500px;
margin: auto;
background: var(--theme-bg);
color: var(--theme-color);
}
.slides {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
.slide {
position: absolute;
top: 0;
right:100%;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
z-index: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-size: auto 100%
}
.slide.current {
left: 0;
right: 0;
z-index: 1;
}
.slide.previous {
left: 0;
right: 100%;
background-position: 0 0;
z-index: 2;
}
.slide.next {
right: 0;
left: 100%;
background-position: 100% 0;
z-index: 2;
}
.pagers {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
visibility: hidden;
z-index: 2
}
.pagers .previousButton,
.pagers .nextButton {
position: absolute;
top: 50%;
width: 1em;
height: 2em;
font-size: 32px;
font-size: 2rem;
margin: 0 16px;
margin: 0 1rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background: rgba(255, 255, 255, .5);
color: #000;
display: flex;
align-items: center;
justify-content: center;
visibility: visible;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.pagers .previousButton:hover, .pagers .nextButton:hover {
background: rgba(255, 255, 255, .9);
}
.pagers .previousButton {
left: 0;
}
.pagers .nextButton {
right: 0;
}
.dots {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
z-index: 2;
visibility: hidden;
}
.dot {
position: relative;
height: 48px;
height: 3rem;
width: 48px;
width: 3rem;
font-size: 16px;
font-size: 1rem;
margin: 4px;
margin: 0.25rem;
visibility: visible;
border-radius: 50%;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: all;
display: flex;
align-items: center;
justify-content: center
}
.dot::before {
content: '';
display: block;
height: 1em;
width: 1em;
border-radius: inherit;
background: rgba(255, 255, 255, .5);
}
.dot:hover {
background: rgba(0, 0, 0, .3);
}
.dot.active::before {
content: '';
background: rgba(255, 255, 255, .9);
}
.pluginLoaded {
/* plugin loaded */
}
.init {
/* plugin initialized */
}
.slides {
/* slides */
}
.slide {
/* slide */
}
.dot {
/* dot */
}
.nextButton {
/* next */
}
.previousButton {
/* prev */
}
.parallax {
/* parallax */
}
/*Downloaded from https://www.codeseek.co/pixelass/paraglider-examples-bRaVyg */
console.clear();
var wrapper = window.Paraglider.wrapper;
var styles = {
pluginLoaded: 'pluginLoaded',
slide: 'slide',
slides: 'slides',
init: 'init',
current: 'current',
previous: 'previous',
next: 'next',
dot: 'dot',
active: 'active',
nextButton: 'nextButton',
prevButton: 'previousButton',
glider: 'glider',
cube: 'cube',
cubes: 'cubes'
};
var classNames = styles;
var parallaxSlider = function parallaxSlider(glider, handlePrev, handleNext) {
return wrapper(glider, {
classNames: classNames,
speed: 1000,
spring: 500,
onSlide: function onSlide(progress, _ref, slides) {
var next = _ref.next,
previous = _ref.previous,
current = _ref.current,
rest = _ref.rest;
if (previous !== null) {
slides.forEach(function (slide) {
slide.style.zIndex = 0;
slide.style.right = 0;
slide.style.left = 0;
});
slides[current].style.zIndex = 3;
slides[previous].style.zIndex = 4;
slides[previous].style.backgroundPosition = ' 0 0';
slides[previous].style.right = 100 - 100 * progress + '%';
} else if (next !== null) {
slides.forEach(function (slide) {
slide.style.zIndex = '';
slide.style.right = '';
slide.style.left = '';
});
slides[current].style.zIndex = 3;
slides[next].style.zIndex = 4;
slides[next].style.backgroundPosition = ' 100% 0';
slides[next].style.left = 100 - 100 * progress + '%';
}
},
onEnd: function onEnd(_ref2, slides) {
var current = _ref2.current;
slides.forEach(function (slide) {
slide.style.transform = '';
slide.style.zIndex = '';
slide.style.right = '';
slide.style.left = '';
});
}
});
};
parallaxSlider(document.querySelector('.' + styles.glider));