Paraglider examples

In this example below you will see how to do a Paraglider examples with some HTML / CSS and Javascript

Examples for ParagliderParaglider is an API driven content slider that allows full flexibility.

Thumbnail
This awesome code was written by , you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ⁣ ©
  • HTML
  • CSS
  • JavaScript
<!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-color:hsl(72, 70%, 70%);">
          <div class="inner" style="background-image:url(&quot;//lorempixel.com/750/500/nature/1&quot;);"></div>
        </article>
        <article class="slide" style="background-color:hsl(144, 70%, 70%);">
          <div class="inner" style="background-image:url(&quot;//lorempixel.com/750/500/nature/2&quot;);"></div>
        </article>
        <article class="slide" style="background-color:hsl(216, 70%, 70%);">
          <div class="inner" style="background-image:url(&quot;//lorempixel.com/750/500/nature/3&quot;);"></div>
        </article>
        <article class="slide" style="background-color:hsl(288, 70%, 70%);">
          <div class="inner" style="background-image:url(&quot;//lorempixel.com/750/500/nature/4&quot;);"></div>
        </article>
        <article class="slide" style="background-color:hsl(360, 70%, 70%);">
          <div class="inner" style="background-image:url(&quot;//lorempixel.com/750/500/nature/5&quot;);"></div>
        </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-bRappm */
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: 0;
  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;
  overflow: hidden
}

.slide.current {
  z-index: 1;

  .inner {}
}

.slide.previous {

  .inner {}
}

.slide.next {

  .inner {}
}

.inner {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.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-bRappm */
console.clear();
var wrapper = window.Paraglider.wrapper;

var styles = {
  pluginLoaded: 'pluginLoaded',
  slide: 'slide',
  inner: 'inner',
  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: 500,
    spring: 250,
    onSlide: function onSlide(progress, _ref, slides) {
      var next = _ref.next,
          previous = _ref.previous,
          current = _ref.current,
          rest = _ref.rest;

      if (previous !== null) {
        slides[current].style.zIndex = 3;
        slides[previous].style.zIndex = 4;
        slides[previous].style.transform = 'translate3d(' + (-100 + progress * 100) + '%, 0, 0)';
        slides[previous].firstElementChild.style.transform = 'translate3d(' + (100 - progress * 100) + '%, 0, 0)';
      } else if (next !== null) {
        slides[current].style.zIndex = 3;
        slides[next].style.zIndex = 4;
        slides[next].style.transform = 'translate3d(' + (100 - progress * 100) + '%, 0, 0)';
        slides[next].firstElementChild.style.transform = 'translate3d(' + (progress * 100 - 100) + '%, 0, 0)';
      }
    },
    onEnd: function onEnd(_ref2, slides) {
      var current = _ref2.current;

      slides.forEach(function (slide) {
        slide.style.zIndex = '';
        slide.style.transform = '';
        slide.firstElementChild.style.transform = '';
      });
    }
  });
};

parallaxSlider(document.querySelector('.' + styles.glider));

Comments