{"id":14964282,"url":"https://github.com/fuxingloh/vue-horizontal-list","last_synced_at":"2025-10-05T15:09:54.881Z","repository":{"id":40607043,"uuid":"233575211","full_name":"fuxingloh/vue-horizontal-list","owner":"fuxingloh","description":"A pure vue native horizontal list implementation for mobile/touch and responsive web.","archived":false,"fork":false,"pushed_at":"2022-04-29T08:53:08.000Z","size":3279,"stargazers_count":179,"open_issues_count":18,"forks_count":33,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-30T04:08:38.745Z","etag":null,"topics":["horizontal","list","list-layouts","listview","nuxt","nuxtjs","ssr","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://fuxingloh.github.io/vue-horizontal-list/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fuxingloh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-13T10:59:42.000Z","updated_at":"2024-10-24T09:23:42.000Z","dependencies_parsed_at":"2022-09-04T12:01:07.119Z","dependency_job_id":null,"html_url":"https://github.com/fuxingloh/vue-horizontal-list","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuxingloh%2Fvue-horizontal-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuxingloh%2Fvue-horizontal-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuxingloh%2Fvue-horizontal-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuxingloh%2Fvue-horizontal-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fuxingloh","download_url":"https://codeload.github.com/fuxingloh/vue-horizontal-list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247436285,"owners_count":20938533,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["horizontal","list","list-layouts","listview","nuxt","nuxtjs","ssr","vue","vuejs"],"created_at":"2024-09-24T13:32:55.725Z","updated_at":"2025-10-05T15:09:49.841Z","avatar_url":"https://github.com/fuxingloh.png","language":"Vue","funding_links":[],"categories":["Components \u0026 Libraries","UI Layout [🔝](#readme)"],"sub_categories":["UI Layout"],"readme":"## 👋 You might want to use [Vue Horizontal](https://github.com/fuxingloh/vue-horizontal) instead!\n\n[Vue Horizontal](https://github.com/fuxingloh/vue-horizontal)\nis another take on the horizontal layout written by me with an ultra simple implementation that is extensible and moves the\nresponsibility to the user rather than the library.\nWith zero dependencies, 3 KB for CDN users it's built for your production needs.\n\n[Vue Horizontal](https://github.com/fuxingloh/vue-horizontal) is a rewrite of this library with many more focus such as\nend-to-end testing on real browsers, SSG/SSR CI testing to make sure all code is SSG/SSR compliant for your SEO!\nDocumentation are also extensible with everything you can think of about horizontal layout documentation through and through.\n\n[Vue Horizontal](https://github.com/fuxingloh/vue-horizontal) also contains a snippet dossier with many SPA/SSR/SSG\nfriendly recipes for your design needs.\n[Vue Horizontal](https://vue-horizontal.fuxing.dev/) is not just a library, **it's a place for everything horizontal.**\n\n## Vue Horizontal List\n\nA pure vue native horizontal list implementation for mobile/touch and responsive web.\nCheck it out here: [fuxingloh.github.io/vue-horizontal-list](https://fuxingloh.github.io/vue-horizontal-list/).\n\n\u003e I created this because I like how AirBnb does their horizontal list, I couldn't find a library that is simple and close to it.\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![License MIT](https://img.shields.io/github/license/fuxingloh/vue-horizontal-list)](https://github.com/fuxingloh/vue-horizontal-list/blob/master/LICENSE)\n[![Latest Release](https://img.shields.io/github/v/release/fuxingloh/vue-horizontal-list)](https://github.com/fuxingloh/vue-horizontal-list/releases)\n[![Contributors](https://img.shields.io/github/contributors-anon/fuxingloh/vue-horizontal-list)](https://github.com/fuxingloh/vue-horizontal-list/graphs/contributors)\n[![Issues](https://img.shields.io/github/issues/fuxingloh/vue-horizontal-list)](https://github.com/fuxingloh/vue-horizontal-list/issues)\n[![GitHub Pages](https://github.com/fuxingloh/vue-horizontal-list/workflows/GitHub%20Pages/badge.svg)](https://fuxingloh.github.io/vue-horizontal-list/)\n[![CI](https://github.com/fuxingloh/vue-horizontal-list/workflows/CI/badge.svg)](https://github.com/fuxingloh/vue-horizontal-list/actions?query=workflow%3ACI)\n\n---\n\n[![vue-horizontal-list screenshot](demo.png)](https://nuxt-app.now.sh/vue-horizontal-list)\n\n## Installation\n\n```shell script\nnpm i vue-horizontal-list\n# or\nyarn add vue-horizontal-list\n```\n\nCheck out this [alternative project](https://github.com/fuxingloh/vue-horizontal) maintained by me for a new take on horizontal layout in vue.\n\n#### Basic usage\n\n```vue\n\u003cvue-horizontal-list\n  :items=\"items\"\n  :options=\"{\n    responsive: [\n      { end: 576, size: 1 },\n      { start: 576, end: 768, size: 2 },\n      { size: 3 },\n    ],\n  }\"\n\u003e\n  \u003ctemplate v-slot:default=\"{item}\"\u003e\n    \u003cdiv class=\"item\"\u003e\n      \u003ch5\u003e{{item.title}}\u003c/h5\u003e\n      \u003cp\u003e{{item.content}}\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n\u003c/vue-horizontal-list\u003e\n```\n\n## Features\n\n- Lightweight implementation with 1 dependencies.\n- SSR supported\n- Mobile touch screen friendly\n- Invisible scroll bar for consistent Windows and MacOS browsing experience.\n- Snap to the nearest item in the horizontal-list when scrolling.\n- Windowed \u0026 Full-screen mode\n  - The windowed mode will respect the container and not show overflowing item\n  - Full-screen mode will show overflowing item, best result for small screen\n- Dynamic responsive breakpoint configuration\n- Navigation control will show up dynamically for larger screen\n- Touch screen friendly\n- Slideshow autoplay by [@Draccano](https://github.com/Draccano).\n- Slot different content at the beginning, or the ending of the items list by [@Draccano](https://github.com/Draccano).\n- Minimal config setup\n- Tested on chrome, edge and safari\n- [Demo](https://fuxingloh.github.io/vue-horizontal-list/)\n- [Examples](https://github.com/fuxingloh/vue-horizontal-list/tree/master/examples)\n\n## All available options\n\n```js\nconst options = {\n  item: {\n    // css class to inject into each individual item\n    class: \"\",\n    // padding between each item\n    padding: 12,\n  },\n  list: {\n    // css class for the parent of item\n    class: \"\",\n    // maximum width of the list it can extend to before switching to windowed mode, basically think of the bootstrap container max-width\n    // windowed is used to toggle between full-screen mode and container mode\n    windowed: 1200,\n    // padding of the list, if container \u003c windowed what is the left-right padding of the list\n    // during full-screen mode the padding will added to left \u0026 right to centralise the item\n    padding: 24,\n  },\n  responsive: [\n    // responsive breakpoints to calculate how many items to show in the list at each width interval\n    // it will always fall back to these:\n    { end: 576, size: 1 },\n    { start: 576, end: 768, size: 2 },\n    { start: 768, end: 992, size: 3 },\n    { start: 992, end: 1200, size: 4 },\n    { start: 1200, size: 5 },\n  ],\n  navigation: {\n    // when to show navigation\n    start: 992,\n    color: \"#000\",\n  },\n  position: {\n    // Start from '1' on mounted.\n    start: 1,\n  },\n  autoplay: {\n    // enable/disable playing slideshow\n    play: true,\n    // the delay duration between slides in milliseconds\n    speed: 1800,\n    // if setup, the slideshow will be in the loop.\n    repeat: true,\n  },\n};\n```\n\n## Advanced usage\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003csection\u003e\n      \u003cvue-horizontal-list :items=\"items\" :options=\"options\"\u003e\n        \u003ctemplate v-slot:nav-prev\u003e\n          \u003cdiv\u003e👈\u003c/div\u003e\n        \u003c/template\u003e\n\n        \u003ctemplate v-slot:nav-next\u003e\n          \u003cdiv\u003e👉\u003c/div\u003e\n        \u003c/template\u003e\n\n        \u003ctemplate v-slot:start\u003e\n          \u003cdiv\u003eFirst Item\u003c/div\u003e\n        \u003c/template\u003e\n\n        \u003ctemplate v-slot:end\u003e\n          \u003cdiv\u003eLast Item\u003c/div\u003e\n        \u003c/template\u003e\n\n        \u003ctemplate v-slot:default=\"{ item }\"\u003e\n          \u003cdiv class=\"item\"\u003e\n            \u003ch5\u003e{{ item.title }}\u003c/h5\u003e\n            \u003cp\u003e{{ item.content }}\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/template\u003e\n      \u003c/vue-horizontal-list\u003e\n    \u003c/section\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Vue from \"vue\";\nimport VueHorizontalList from \"@/vue-horizontal-list.vue\";\n\nexport default Vue.extend({\n  name: \"ServeDev\",\n  components: {\n    VueHorizontalList,\n  },\n  data() {\n    return {\n      options: {\n        responsive: [\n          { end: 576, size: 1 },\n          { start: 576, end: 768, size: 2 },\n          { start: 768, end: 992, size: 3 },\n          { size: 4 },\n        ],\n        list: {\n          // 1200 because @media (min-width: 1200px) and therefore I want to switch to windowed mode\n          windowed: 1200,\n\n          // Because: #app {padding: 80px 24px;}\n          padding: 24,\n        },\n        position: {\n          start: 2,\n        },\n        autoplay: { play: true, repeat: true, speed: 2500 },\n      },\n      items: [\n        { title: \"Item 0\", content: \"Content item with description\" },\n        { title: \"Item 1\", content: \"Content item with description\" },\n        { title: \"Item 2\", content: \"Content item with description\" },\n      ],\n    };\n  },\n});\n\u003c/script\u003e\n\n\u003cstyle\u003e\nbody {\n  margin: 0;\n  padding: 0;\n}\n\n#app {\n  max-width: 1400px;\n\n  margin-left: auto;\n  margin-right: auto;\n\n  padding: 80px 24px;\n}\n\n@media (min-width: 1200px) {\n  #app {\n    padding-left: 80px;\n    padding-right: 80px;\n  }\n}\n\u003c/style\u003e\n```\n\n## Development\n\n```shell script\nyarn # to setup\nyarn run examples:serve # to dev and test\n```\n\n## Contributions\n\nFor any question or feature request please feel free to create an [issue](https://github.com/fuxingloh/vue-horizontal-list/issues/new) or [pull request](https://github.com/fuxingloh/vue-horizontal-list/pulls).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffuxingloh%2Fvue-horizontal-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffuxingloh%2Fvue-horizontal-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffuxingloh%2Fvue-horizontal-list/lists"}