Awesome
seamless-scroll
<p align="center"> <img src="./test/timg.jpg" width="440"/> </p> <p align="center"> πΎ <a href="https://chenxuan0000.github.io/seamless-scroll/">sample demo</a> | π <a href="./document/README.md">δΈζζζ‘£</a> </p>js seamless-scroll plugin
Browser support
- mobile gestures are not supported.
Installation
NPM
npm install seamscroll --save
CDN
https://cdn.jsdelivr.net/npm/seamscroll@0.0.11/build/seamscroll.min.js
Usage
const seamless = require('seamscroll')
`or`
import seamless from 'seamscroll'
seamless.init({
dom: document.getElementById('demo1')
})
//script tag
<script src="seamscroll.min.js"></script>
<script>
seamless.init({
dom: document.getElementById('demo1')
})
</script>
Demo
.demo2 {
width: 600px;
height: 100px;
position: relative;
overflow: hidden;
margin-top: 100px;
}
.list2 li {
float: left;
width: 100px;
height: 100px;
margin-right: 20px;
text-align: center;
font-size: 20px;
color: #fff;
line-height:100px;
background-color: #ccc;
}
<div class="demo2">
<ul class="list2 clearfix" id="demo2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<script src="seamscroll.min.js"></script>
seamscroll.init({
dom: document.getElementById('demo2'),
direction: 2
})
Configure
*Required parameters(dom)
key | description | default | val |
---|---|---|---|
*dom | the role of the element | null | dom |
step | step,the faster the rolling speed is faster | 1 | Number |
hoverStop | mouse hover control is enabled | true | Boolean |
direction | 0 down 1 up 2 left 3 right | 1 | Number |
singleHeight | one single stop height(default zero is seamless) => direction 0/1 | 0 | Number |
singleWidth | one single stop width(default zero is seamless) => direction 2/3 | 0 | Number |
waitTime | one single data stop wait time(1s) | 1000 | Number |
Changelog
See the GitHub release history.
License
seamless-scroll is open source and released under the MIT License.