Scroller and Slider
Scroller and Slider are the two main components of JPage. The Scroller is responsible for the vertical scroll. The Slider is responsible for the horizontal scroll.
Scroller
The Scroller is made up of sections. Therefore, to create a scroller just add the section class to a container:
<div class="section">
<!-- Your content -->
</div>
Configuring the Scroller:
const jpageConfig = {
scroller: {
showControls: true, // whether controls should be shown or not
waitingTime: 400, // waiting time for scrolling
duration: 700, //scroll duration time
},
};
Slider
The Slider is formed by slides and is inside a section of the Scroller. So, to create a Slider just do:
<div class="section">
<div class="slider">
<div class="slide">
<!-- Your content -->
</div>
<div class="slide">
<!-- Your content -->
</div>
</div>
</div>
Configuring the Slider:
const jpageConfig = {
slider: {
showControls: true, // whether controls should be shown or not
duration: 700, //slider duration time
},
};