https://github.com/mikr13/vue-horizontal-list-autoscroll
A pure vue horizontal list implementation with minimal dependencies, ssr support, mobile friendly, touch friendly and responsive now with auto scroll
https://github.com/mikr13/vue-horizontal-list-autoscroll
airbnb-list auto-scroll autoscroll ssr-support vue-horizontal
Last synced: about 1 month ago
JSON representation
A pure vue horizontal list implementation with minimal dependencies, ssr support, mobile friendly, touch friendly and responsive now with auto scroll
- Host: GitHub
- URL: https://github.com/mikr13/vue-horizontal-list-autoscroll
- Owner: mikr13
- License: mit
- Created: 2020-06-23T05:34:09.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-14T06:04:19.000Z (almost 2 years ago)
- Last Synced: 2025-04-12T18:04:27.317Z (about 1 month ago)
- Topics: airbnb-list, auto-scroll, autoscroll, ssr-support, vue-horizontal
- Language: Vue
- Homepage: https://mikr13.github.io/vue-horizontal-list-autoscroll/
- Size: 2.17 MB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 👋 vue-horizontal-list-autoscroll 🕶
A pure vue horizontal list implementation with minimal dependencies, ssr support, mobile friendly, touch friendly and responsive now with auto scroll
This project is built on top of `vue-horizontal-list`, huge shout out to [Fuxing Loh](https://github.com/fuxingloh) for laying the groundwork, every other option and configuration available there is valid here also before version (1.0.7).
## Demo
[All Examples](https://mikr13.github.io/vue-horizontal-list-autoscroll/)
## Installation
```sh
npm i vue-horizontal-list-autoscroll
# or
yarn add vue-horizontal-list-autoscroll
```
## Basic usage
```vue
{{item.title}}
{{item.content}}
```
## Features
* Lightweight implementation with 1 dependencies.
* SSR supported
* Mobile touch screen friendly
* Invisible scroll bar for consistent Windows and MacOS browsing experience.
* Autoscroll feature with return to start (repeat) feature
* Slideshow feature with return to start (repeat) feature
* Snap to the nearest item in the horizontal-list when scrolling.
* Windowed & Full-screen mode
* The windowed mode will respect the container and not show overflowing item
* Full-screen mode will show overflowing item, best result for small screen
* Dynamic responsive breakpoint configuration
* Navigation control will show up dynamically for larger screen
* Touch screen friendly
* Minimal config setup
* Custom prev & next icons support
* Tested on chrome, edge and safari
* [Examples](https://github.com/mikr13/vue-horizontal-list-autoscroll/tree/master/examples)
## Options
```js
const options = {
item: {
// css class to inject into each individual item
class: '',
// padding between each item
padding: 12
},
autoscroll: {
// auto scroll feature enabled or not
enabled: true,
// if enabled, the interval in milliseconds, by default 5000 milliseconds
interval: 15000,
// if enabled, the list will autoscroll to beginning of the list once it reaches the end i.e. all list items are scrolled
repeat: true
},
slideshow: {
// slide show feature enabled or not
enabled: true,
// if enabled, the interval in milliseconds, by default 5000 milliseconds
interval: 15000,
// if enabled, the list will autoscroll to beginning of the list once it reaches the end i.e. all list items are scrolled
repeat: false
},
list: {
// css class for the parent of item
class: '',
// maximum width of the list it can extend to before switching to windowed mode, basically think of the bootstrap container max-width
// windowed is used to toggle between full-screen mode and container mode
windowed: 1200,
// padding of the list, if container < windowed what is the left-right padding of the list
// during full-screen mode the padding will added to left & right to centralise the item
padding: 24
},
responsive: [
// responsive breakpoints to calculate how many items to show in the list at each width interval
// it will always fall back to these:
{end: 576, size: 1},
{start: 576, end: 768, size: 2},
{start: 768, end: 992, size: 3},
{start: 992, end: 1200, size: 4},
{start: 1200, size: 5}
],
navigation: {
// when to show navigation
start: 992,
color: '#000'
}
}
```
## Examples
### Basic Responsive Usage
* Width between 0 - 576, show 1
* Width between 576 - 768, show 2
* Width catch all, show 3
## Contributing
For any question or feature request please feel free to create an [issue](https://github.com/MiKr13/vue-horizontal-list-autoscroll/issues/new) or [pull request](https://github.com/MiKr13/vue-horizontal-list-autoscroll/pulls).