Card-style Vertical Page Slider In Vanilla JavaScript – SlideScroll

Category: Javascript , Slider | January 11, 2019
0 Comment
AuthorPonomareVlad
Last UpdateJanuary 11, 2019
LicenseMIT
Tags
Views1,386 views
OfficialGo to website
Live DemoDownload
Card-style Vertical Page Slider In Vanilla JavaScript – SlideScroll

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