Card-style Vertical Page Slider In Vanilla JavaScript – SlideScroll

Category: Javascript , Slider | January 11, 2019
0 Comment
Demo Download
Author:PonomareVlad
Views Total:1,345 views
Official Page:Go to website
Last Update:January 11, 2019
License:MIT

Preview:

Card-style Vertical Page Slider In Vanilla JavaScript – SlideScroll

Description:

SlideScroll is a JavaScript library which slides through a collection of content sections on page scroll, similar to the card slider.

How to use it:

Download and import the SlideScroll into the document.

<!-- ES6+ Modules import -->
<script type="module">
  import SlideScroll from './index.mjs';
</script>
<!-- CommonJS modules import (Emulation) for older browsers -->
<script nomodule src="index.js"></script>

Add the data-slider-viewport attribute to the body.

<body data-slider-viewport>

Create page sections with the following data attributes.

<section data-slide-wrapper>
  <div data-slide-content style="background-image: url(bg1.jpg)">
    <div data-slide-caption-animation>
      <h1>Slide 1</h1>
      <p>Content 1</p>
    </div>
  </div>
</section>
<section data-slide-wrapper>
  <div data-slide-content style="background-image: url(bg2.jpg)">
    <div data-slide-caption-animation>
      <h1>Slide 2</h1>
      <p>Content 2</p>
    </div>
  </div>
</section>
<section data-slide-wrapper>
  <div data-slide-content style="background-image: url(bg3.jpg)">
    <div data-slide-caption-animation>
      <h1>Slide 3</h1>
      <p>Content 3</p>
    </div>
  </div>
</section>
...

Initialize the library and done.

window.slideScroll = new SlideScroll({
  debug: true, // debug mode
  activeHook: slideNode => dataLayer.push({'event': 'foto_' + slideNode.order})
});

See Also:

You Might Be Interested In:

Leave a Reply