1 | <p align="center">
|
2 | <a href="https://infiniteajaxscroll.com" target="_blank">
|
3 | <img alt="Infinite Ajax Scroll" title="Infinite Ajax Scroll" src="https://infiniteajaxscroll.com/img/infinite-ajax-scroll-mark.svg" width="200">
|
4 | </a>
|
5 | </p>
|
6 |
|
7 | <h1 align="center">Infinite Ajax Scroll</h1>
|
8 |
|
9 | Turn your existing pagination into infinite scrolling pages with ease.
|
10 |
|
11 | * SEO friendly 🥇
|
12 | * Doesn't break browsers back button 💯
|
13 | * Highly customizable ✨
|
14 |
|
15 | More features, documentation and examples available at: https://docs.infiniteajaxscroll.com/
|
16 |
|
17 | [](https://www.npmjs.com/package/@webcreate/infinite-ajax-scroll)
|
18 |
|
19 | ## Installation
|
20 |
|
21 | ### Use Infinite Ajax Scroll via CDN
|
22 |
|
23 | Get up and running in no time by linking directly to Infinite Ajax Scroll on [unpkg](https://unpkg.com).
|
24 |
|
25 | ```markup
|
26 | <script src="https://unpkg.com/@webcreate/infinite-ajax-scroll@^3/dist/infinite-ajax-scroll.min.js"></script>
|
27 | ```
|
28 |
|
29 | Place this code right before the `</body>` tag on each template or page that you want to use infinite scroll on.
|
30 |
|
31 | ### Manage as a package
|
32 |
|
33 | Are you using NPM in your projects? You can install and update our package easily.
|
34 |
|
35 | ```bash
|
36 | $ npm install --save @webcreate/infinite-ajax-scroll
|
37 | ```
|
38 |
|
39 | ## Usage
|
40 |
|
41 | Infinite Ajax Scroll works on a container with item elements which get appended. A next link is used to determine the next url.
|
42 |
|
43 | ```html
|
44 | <div class="container">
|
45 | <div class="item">...</div>
|
46 | <div class="item">...</div>
|
47 | <div class="item">...</div>
|
48 | ...
|
49 | </div>
|
50 |
|
51 | <div class="pagination">
|
52 | <a href="page1.html" class="prev">Prev</a>
|
53 | <span class="current">2</span>
|
54 | <a href="page3.html" class="next">Next</a>
|
55 | </div>
|
56 | ```
|
57 |
|
58 | Now you can configure Infinite Ajax Scroll:
|
59 |
|
60 | ```javascript
|
61 | // import if you use the NPM package
|
62 | import InfiniteAjaxScroll from '@webcreate/infinite-ajax-scroll';
|
63 |
|
64 | let ias = new InfiniteAjaxScroll('.container', {
|
65 | item: '.item',
|
66 | next: '.next',
|
67 | prev: '.prev',
|
68 | pagination: '.pagination'
|
69 | });
|
70 | ```
|
71 |
|
72 | Full documentation can be found at https://docs.infiniteajaxscroll.com
|
73 |
|
74 | ## Licensing
|
75 |
|
76 | Infinite Ajax Scroll is dual licensed:
|
77 |
|
78 | 1. Under the Free Software Foundation’s [GNU AGPL v.3.0](LICENSE); or
|
79 | 2. Under an [Infinite Ajax Scroll Commercial License](https://infiniteajaxscroll.com/licenses/)
|
80 |
|
81 | Buying a commercial license is mandatory as soon as you develop commercial activities distributing the Infinite Ajax Scroll software inside your product or deploying it on a network without disclosing the source code of your own applications under the AGPL license.
|
82 |
|
83 | See https://infiniteajaxscroll.com/licenses/ for more details.
|