npm install scroll-slideUsage
Install the package via npm:
API
Please visit repo
to see guides.
Basic Examples
A very basic example with four slides, those heights are all the same as the viewport's height. If
style.height of viewport is undefined, viewport's height will be set to it's parent's height.
<div style="height: 200px" id="viewport1">
<section class="slide" style="height: 200px; background: green;">Slide 1</section>
<section class="slide" style="height: 200px; background: red;">Slide 2</section>
<section class="slide" style="height: 200px; background: orange;">Slide 3</section>
<section class="slide" style="height: 200px; background: blue;">Slide 4</section>
</div>
new Scroll({
viewport: document.getElementById('viewport1'),
slides: document.querySelectorAll('#viewport1 section')
});
Slides with different heights.
<div style="height: 200px" id="viewport2">
<section class="slide" style="height: 100px; background: green;">Slide 1</section>
<section class="slide" style="height: 200px; background: red;">Slide 2</section>
<section class="slide" style="height: 50px; background: orange;">Slide 3</section>
<section class="slide" style="background: blue;">Slide 4<br><br>A<br><br>LONG<br><br>SLIDE<br><br>!<br></section>
</div>
new Scroll({
viewport: document.getElementById('viewport2'),
slides: document.querySelectorAll('#viewport2 section')
});
With paginator. You can put a paginator on either left or right side of the viewport.
<div style="height: 200px" id="viewport3">
<section class="slide" style="height: 200px; background: green;">Slide 1</section>
<section class="slide" style="height: 200px; background: red;">Slide 2</section>
<section class="slide" style="height: 100px; background: orange;">Slide 3</section>
<section class="slide" style="height: 200px; background: blue;">Slide 4</section>
</div>
new Scroll({
viewport: document.getElementById('viewport3'),
slides: document.querySelectorAll('#viewport3 section'),
paginator: 'right'
});
Slides with full mode. The slide with
data-full attribute set to "true" will fill the viewport. If it's original height is larger than viewport's height, it will become a multi-pages slide (Slide 4). If the original height is smaller than viewport's height, the slide won't be larger than the viewport (Slide 3).
<div style="height: 200px" id="viewport4">
<section class="slide" style="background: green;" data-full="true">Slide 1<br>With <code>data-full</code> set to "true"</section>
<section class="slide" style="background: red;">Slide 2<br>Without <code>data-full</code> set to "true"</section>
<section class="slide" style="height: 50px; background: orange;" data-full="true">Slide 3<br>With <code>data-full</code> set to "true"<br>A<br><br>LONG<br><br>SLIDE<br><br>!<br></section>
<section class="slide" style="height: 350px; background: blue;" data-full="true">Slide 4<br>With <code>data-full</code> set to "true"<br>A<br><br>MUTI-PAGES<br><br>SLIDE<br><br>!<br></section>
</div>
new Scroll({
viewport: document.getElementById('viewport4'),
slides: document.querySelectorAll('#viewport4 section')
});
Add or remove slides programatically. Use
add(el, index) and remove(index) to do it.
<div style="height: 200px" id="viewport5">
<section class="slide" style="height: 200px; background: green;">Slide 1</section>
<section class="slide" style="height: 200px; background: red;">Slide 2</section>
<section class="slide" style="height: 100px; background: orange;">Slide 3</section>
<section class="slide" style="height: 200px; background: blue;">Slide 4</section>
</div>
const s = new Scroll({
viewport: document.getElementById('viewport5'),
slides: document.querySelectorAll('#viewport5 section'),
paginator: 'right'
});
const vp = document.getElementById('viewport5');
document.getElementById('button-add').addEventListener('click', function(e) {
const slide = document.createElement('section');
slide.classList.add('slide');
slide.style.background = 'grey';
section.innerHTML = `Slide ${vp.childList.length + 1}`;
s.add(slide);
});
document.getElementById('button-remove').addEventListener('click', function(e) {
s.remove(0);
});