├── .prettierignore
├── .browserslistrc
├── demo.png
├── .github
    ├── PULL_REQUEST_TEMPLATE.md
    ├── auto_assign.yml
    ├── pr-labeler.yml
    ├── workflows
    │   ├── release-drafter.yml
    │   ├── triage.yml
    │   ├── gh-pages.yml
    │   ├── publish.yml
    │   └── ci.yml
    └── release-drafter.yml
├── vue.config.js
├── examples
    ├── serve.js
    ├── simple.vue
    ├── position-start.vue
    ├── full-width.vue
    ├── auto-play.vue
    ├── nav-prev-next-slot.vue
    ├── responsive.vue
    ├── item-customization.vue
    ├── left-right-slot.vue
    ├── index.vue
    ├── image-two.vue
    ├── image-three.vue
    ├── image-four.vue
    └── image-five.vue
├── babel.config.js
├── .gitignore
├── LICENSE
├── src
    ├── entry.js
    └── vue-horizontal-list.vue
├── package.json
└── README.md


/.prettierignore:
--------------------------------------------------------------------------------
1 | .github
2 | .idea
3 | dist
4 | gh-pages
5 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | current node
2 | last 2 versions and > 2%
3 | ie > 10
4 | 


--------------------------------------------------------------------------------
/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fuxingloh/vue-horizontal-list/HEAD/demo.png


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | <!--
2 | Give a brief description of the pull request. 
3 | -->
4 | 


--------------------------------------------------------------------------------
/.github/auto_assign.yml:
--------------------------------------------------------------------------------
1 | addAssignees: author
2 | addReviewers: true
3 | 
4 | reviewers:
5 |   - fuxingloh
6 | 
7 | numberOfReviewers: 0
8 | 


--------------------------------------------------------------------------------
/.github/pr-labeler.yml:
--------------------------------------------------------------------------------
1 | feature: [ 'feature/*', 'feat/*', 'enhancement/*' ]
2 | fix: [ 'fix/*', 'bug/*', 'bugfix/*' ]
3 | chore: [ 'chore/*', 'docs/*' , 'doc/*', 'ci/*' ]
4 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   publicPath:
3 |     process.env.NODE_ENV === "production" ? "/vue-horizontal-list/" : "/",
4 |   outputDir: "gh-pages",
5 | };
6 | 


--------------------------------------------------------------------------------
/examples/serve.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import Index from "./index.vue";
3 | 
4 | Vue.config.productionTip = false;
5 | 
6 | new Vue({
7 |   render: (h) => h(Index),
8 | }).$mount("#app");
9 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | const devPresets = ["@vue/babel-preset-app"];
2 | const buildPresets = ["@babel/preset-env"];
3 | module.exports = {
4 |   presets: process.env.NODE_ENV === "development" ? devPresets : buildPresets,
5 | };
6 | 


--------------------------------------------------------------------------------
/.github/workflows/release-drafter.yml:
--------------------------------------------------------------------------------
 1 | name: Release Drafter
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ master ]
 6 | 
 7 | 
 8 | jobs:
 9 |   draft-release:
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - uses: release-drafter/release-drafter@v5
13 |         env:
14 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 
23 | gh-pages
24 | 


--------------------------------------------------------------------------------
/.github/workflows/triage.yml:
--------------------------------------------------------------------------------
 1 | name: "Triage"
 2 | 
 3 | on:
 4 |   pull_request:
 5 |     types: [ opened, reopened, ready_for_review ]
 6 |     branches: [ master ]
 7 | 
 8 | jobs:
 9 |   triage:
10 |     name: Triage
11 |     runs-on: ubuntu-latest
12 |     steps:
13 |       - uses: TimonVS/pr-labeler-action@v3
14 |         env:
15 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
16 | 
17 |       - uses: kentaro-m/auto-assign-action@v1.1.2
18 | 


--------------------------------------------------------------------------------
/.github/workflows/gh-pages.yml:
--------------------------------------------------------------------------------
 1 | name: GitHub Pages
 2 | 
 3 | on:
 4 |   workflow_dispatch:
 5 |   push:
 6 |     branches: [ master ]
 7 | 
 8 | 
 9 | jobs:
10 |   deploy:
11 |     name: Deploy
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - uses: actions/checkout@v2
15 | 
16 |       - uses: actions/setup-node@v1
17 |         with:
18 |           node-version: '14'
19 | 
20 |       - run: yarn install --frozen-lockfile
21 | 
22 |       - run: yarn run examples:build
23 | 
24 |       - name: Deploy 🚀
25 |         uses: JamesIves/github-pages-deploy-action@3.7.1
26 |         with:
27 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
28 |           BRANCH: gh-pages
29 |           FOLDER: gh-pages
30 |           CLEAN: true
31 | 


--------------------------------------------------------------------------------
/.github/workflows/publish.yml:
--------------------------------------------------------------------------------
 1 | name: Publish
 2 | 
 3 | on:
 4 |   release:
 5 |     types: [ published ]
 6 | 
 7 | jobs:
 8 |   build:
 9 |     runs-on: ubuntu-latest
10 |     steps:
11 |       - uses: actions/checkout@v2
12 |       - uses: actions/setup-node@v1
13 |         with:
14 |           node-version: '14'
15 |           registry-url: 'https://registry.npmjs.org'
16 | 
17 |       - run: yarn install --frozen-lockfile
18 | 
19 |       - name: Check package version
20 |         uses: technote-space/package-version-check-action@v1
21 |         with:
22 |           COMMIT_MESSAGE: 'release: update package version'
23 | 
24 |       - run: yarn build
25 | 
26 |       - run: yarn publish --non-interactive
27 |         env:
28 |           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
29 | 


--------------------------------------------------------------------------------
/.github/release-drafter.yml:
--------------------------------------------------------------------------------
 1 | name-template: 'v$RESOLVED_VERSION 🌈'
 2 | tag-template: 'v$RESOLVED_VERSION'
 3 | categories:
 4 |   - title: '🚀 Features'
 5 |     labels:
 6 |       - 'feature'
 7 |       - 'enhancement'
 8 |   - title: '🐛 Bug Fixes'
 9 |     labels:
10 |       - 'fix'
11 |       - 'bugfix'
12 |       - 'bug'
13 |   - title: '🧰 Maintenance'
14 |     labels:
15 |       - 'chore'
16 |       - 'docs'
17 | change-template: '- $TITLE @$AUTHOR (#$NUMBER)'
18 | change-title-escapes: '\<*_&'
19 | version-resolver:
20 |   minor:
21 |     labels:
22 |       - 'feature'
23 |       - 'enhancement'
24 |   patch:
25 |     labels:
26 |       - 'patch'
27 |       - 'bug'
28 |       - 'bugfix'
29 |       - 'fix'
30 |   default: patch
31 | template: |
32 |   ## Changes
33 | 
34 |   $CHANGES
35 | 


--------------------------------------------------------------------------------
/examples/simple.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Simple</h2>
 4 |     <vue-horizontal-list :items="items" :options="options">
 5 |       <template v-slot:default="{ item }">
 6 |         <div class="item">
 7 |           <h3>{{ item.title }}</h3>
 8 |           <p>{{ item.content }}</p>
 9 |         </div>
10 |       </template>
11 |     </vue-horizontal-list>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import VueHorizontalList from "@/vue-horizontal-list.vue";
17 | 
18 | export default {
19 |   name: "simple",
20 |   components: {
21 |     VueHorizontalList,
22 |   },
23 |   data() {
24 |     return {
25 |       items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
26 |         return { title: `Item ${i}`, content: `🚀 Simple content ${i}` };
27 |       }),
28 |       options: {},
29 |     };
30 |   },
31 | };
32 | </script>
33 | 
34 | <style scoped>
35 | .item {
36 |   padding: 16px 24px;
37 |   border-radius: 3px;
38 |   background: #f5f5f5;
39 | }
40 | </style>
41 | 


--------------------------------------------------------------------------------
/examples/position-start.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Position Start From 2</h2>
 4 |     <vue-horizontal-list :items="items" :options="options">
 5 |       <template v-slot:default="{ item }">
 6 |         <div class="item">
 7 |           <h3>{{ item.title }}</h3>
 8 |           <p>{{ item.content }}</p>
 9 |         </div>
10 |       </template>
11 |     </vue-horizontal-list>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import VueHorizontalList from "@/vue-horizontal-list.vue";
17 | 
18 | export default {
19 |   name: "position-start",
20 |   components: {
21 |     VueHorizontalList,
22 |   },
23 |   data() {
24 |     return {
25 |       items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
26 |         return { title: `Item ${i}`, content: `Position Start From 2 - ${i}` };
27 |       }),
28 |       options: {
29 |         position: {
30 |           start: 1,
31 |         },
32 |       },
33 |     };
34 |   },
35 | };
36 | </script>
37 | 
38 | <style scoped>
39 | .item {
40 |   padding: 16px 24px;
41 |   border-radius: 3px;
42 |   background: #f5f5f5;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/examples/full-width.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Responsive: simple full width carousel</h2>
 4 |     <vue-horizontal-list :items="items" :options="options">
 5 |       <template v-slot:default="{ item }">
 6 |         <div class="item">
 7 |           <h3>{{ item.title }}</h3>
 8 |           <p>{{ item.content }}</p>
 9 |         </div>
10 |       </template>
11 |     </vue-horizontal-list>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import VueHorizontalList from "@/vue-horizontal-list.vue";
17 | 
18 | export default {
19 |   name: "full-width",
20 |   components: {
21 |     VueHorizontalList,
22 |   },
23 |   data() {
24 |     return {
25 |       items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
26 |         return {
27 |           title: `Full Width Item ${i}`,
28 |           content: `A simple full width carousel!`,
29 |         };
30 |       }),
31 |       options: {
32 |         responsive: [{ size: 1 }],
33 |       },
34 |     };
35 |   },
36 | };
37 | </script>
38 | 
39 | <style scoped>
40 | .item {
41 |   padding: 32px;
42 |   border-radius: 3px;
43 |   background: #f5f5f5;
44 | }
45 | </style>
46 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Fuxing Loh
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | 
 3 | on:
 4 |   pull_request:
 5 |     branches: [ master ]
 6 | 
 7 | jobs:
 8 |   yarn:
 9 |     name: Build
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - uses: actions/checkout@v2
13 | 
14 |       - uses: actions/setup-node@v1
15 |         with:
16 |           node-version: '14'
17 |           registry-url: 'https://registry.npmjs.org'
18 | 
19 |       - run: yarn install --frozen-lockfile
20 |       - run: yarn build
21 | 
22 |   prettier:
23 |     name: Prettier
24 |     runs-on: ubuntu-latest
25 |     steps:
26 |       - uses: actions/checkout@v2
27 | 
28 |       - uses: actions/setup-node@v1
29 |         with:
30 |           node-version: '14'
31 |           registry-url: 'https://registry.npmjs.org'
32 | 
33 |       - run: yarn install --frozen-lockfile
34 |       - run: yarn run prettier:check
35 | 
36 |       - if: ${{ failure() }}
37 |         uses: unsplash/comment-on-pr@master
38 |         env:
39 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
40 |         with:
41 |           msg: "Prettier check failed. You need to run `yarn run prettier:write` before committing."
42 |           check_for_duplicate_msg: true
43 | 


--------------------------------------------------------------------------------
/examples/auto-play.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Autoplay</h2>
 4 |     <p>
 5 |       Contributed by
 6 |       <a href="https://github.com/Draccano" target="_blank">@Draccano</a>
 7 |     </p>
 8 | 
 9 |     <vue-horizontal-list :items="items" :options="options">
10 |       <template v-slot:default="{ item }">
11 |         <div class="item">
12 |           <h3>{{ item.title }}</h3>
13 |           <p>{{ item.content }}</p>
14 |         </div>
15 |       </template>
16 |     </vue-horizontal-list>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import VueHorizontalList from "@/vue-horizontal-list.vue";
22 | 
23 | export default {
24 |   name: "auto-play",
25 |   components: {
26 |     VueHorizontalList,
27 |   },
28 |   data() {
29 |     return {
30 |       items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
31 |         return { title: `Auto play ${i}`, content: `Auto play, 3000ms.` };
32 |       }),
33 |       options: {
34 |         autoplay: { play: true, repeat: true, speed: 3000 },
35 |       },
36 |     };
37 |   },
38 | };
39 | </script>
40 | 
41 | <style scoped>
42 | .item {
43 |   padding: 24px;
44 |   border-radius: 3px;
45 |   background: #f5f5f5;
46 | }
47 | </style>
48 | 


--------------------------------------------------------------------------------
/examples/nav-prev-next-slot.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Custom Prev & Next Nav Icon</h2>
 4 |     <vue-horizontal-list :items="items" :options="options">
 5 |       <template v-slot:nav-prev>
 6 |         <div>👈</div>
 7 |       </template>
 8 | 
 9 |       <template v-slot:nav-next>
10 |         <div>👉</div>
11 |       </template>
12 | 
13 |       <template v-slot:default="{ item }">
14 |         <div class="item">
15 |           <h3>{{ item.title }}</h3>
16 |           <p>{{ item.content }}</p>
17 |         </div>
18 |       </template>
19 |     </vue-horizontal-list>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | import VueHorizontalList from "@/vue-horizontal-list.vue";
25 | 
26 | export default {
27 |   name: "nav-prev-next-slot",
28 |   components: {
29 |     VueHorizontalList,
30 |   },
31 |   data() {
32 |     return {
33 |       items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
34 |         return { title: `Item ${i}`, content: `Content ${i}` };
35 |       }),
36 |       options: {},
37 |     };
38 |   },
39 | };
40 | </script>
41 | 
42 | <style scoped>
43 | .item {
44 |   padding: 16px 24px;
45 |   border-radius: 3px;
46 |   background: #f5f5f5;
47 | }
48 | </style>
49 | 


--------------------------------------------------------------------------------
/examples/responsive.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Responsive: 4, 3, 2, 1</h2>
 4 |     <vue-horizontal-list :items="items" :options="options">
 5 |       <template v-slot:default="{ item }">
 6 |         <div class="item">
 7 |           <h3>{{ item.title }}</h3>
 8 |           <p>{{ item.content }}</p>
 9 |         </div>
10 |       </template>
11 |     </vue-horizontal-list>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import VueHorizontalList from "@/vue-horizontal-list.vue";
17 | 
18 | export default {
19 |   name: "responsive",
20 |   components: {
21 |     VueHorizontalList,
22 |   },
23 |   data() {
24 |     return {
25 |       items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((i) => {
26 |         return {
27 |           title: `Responsive 4-3-2-1`,
28 |           content: `Responsive Content ${i}!`,
29 |         };
30 |       }),
31 |       options: {
32 |         responsive: [
33 |           { end: 576, size: 1 },
34 |           { start: 576, end: 768, size: 2 },
35 |           { start: 768, end: 992, size: 3 },
36 |           { size: 4 },
37 |         ],
38 |       },
39 |     };
40 |   },
41 | };
42 | </script>
43 | 
44 | <style scoped>
45 | .item {
46 |   padding: 24px;
47 |   border-radius: 3px;
48 |   background: #f5f5f5;
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/examples/item-customization.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Item Customization</h2>
 4 |     <p>Remove padding and add a css class 'item-custom-name' to item.</p>
 5 |     <vue-horizontal-list :items="items" :options="options">
 6 |       <template v-slot:default="{ item }">
 7 |         <div class="item">
 8 |           <h3>{{ item.title }}</h3>
 9 |           <p>{{ item.content }}</p>
10 |         </div>
11 |       </template>
12 |     </vue-horizontal-list>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import VueHorizontalList from "@/vue-horizontal-list.vue";
18 | 
19 | export default {
20 |   name: "item-customization",
21 |   components: {
22 |     VueHorizontalList,
23 |   },
24 |   data() {
25 |     return {
26 |       items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
27 |         return { title: `Item Customization ${i}`, content: `Customized Item` };
28 |       }),
29 |       options: {
30 |         item: {
31 |           class: "item-custom-name",
32 |           padding: 0,
33 |         },
34 |       },
35 |     };
36 |   },
37 | };
38 | </script>
39 | 
40 | <style scoped>
41 | .item {
42 |   padding: 24px;
43 |   border-radius: 3px;
44 |   background: #f5f5f5;
45 | }
46 | </style>
47 | 
48 | <style>
49 | .item-custom-name h3,
50 | .item-custom-name p {
51 |   color: red;
52 | }
53 | </style>
54 | 


--------------------------------------------------------------------------------
/src/entry.js:
--------------------------------------------------------------------------------
 1 | // Import vue component
 2 | import component from "@/vue-horizontal-list.vue";
 3 | 
 4 | // install function executed by Vue.use()
 5 | const install = function installVueHorizontalList(Vue) {
 6 |   if (install.installed) return;
 7 |   install.installed = true;
 8 |   Vue.component("VueHorizontalList", component);
 9 | };
10 | 
11 | // Create module definition for Vue.use()
12 | const plugin = {
13 |   install,
14 | };
15 | 
16 | // To auto-install on non-es builds, when vue is found
17 | // eslint-disable-next-line no-redeclare
18 | /* global window, global */
19 | if ("false" === process.env.ES_BUILD) {
20 |   let GlobalVue = null;
21 |   if (typeof window !== "undefined") {
22 |     GlobalVue = window.Vue;
23 |   } else if (typeof global !== "undefined") {
24 |     GlobalVue = global.Vue;
25 |   }
26 |   if (GlobalVue) {
27 |     GlobalVue.use(plugin);
28 |   }
29 | }
30 | 
31 | // Inject install function into component - allows component
32 | // to be registered via Vue.use() as well as Vue.component()
33 | component.install = install;
34 | 
35 | // Export component by default
36 | export default component;
37 | 
38 | // It's possible to expose named exports when writing components that can
39 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
40 | // export const RollupDemoDirective = component;
41 | 


--------------------------------------------------------------------------------
/examples/left-right-slot.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Slots: Left & Right</h2>
 4 |     <p>
 5 |       Contributed by
 6 |       <a href="https://github.com/Draccano" target="_blank">@Draccano</a>
 7 |     </p>
 8 |     <vue-horizontal-list :items="items" :options="options">
 9 |       <template v-slot:start>
10 |         <div class="item item-start-end">
11 |           <div>
12 |             <h3>START</h3>
13 |             <p>-</p>
14 |           </div>
15 |         </div>
16 |       </template>
17 |       <template v-slot:default="{ item }">
18 |         <div class="item">
19 |           <h3>{{ item.title }}</h3>
20 |           <p>{{ item.content }}</p>
21 |         </div>
22 |       </template>
23 |       <template v-slot:end>
24 |         <div class="item item-start-end">
25 |           <div>
26 |             <h3>END</h3>
27 |             <p>-</p>
28 |           </div>
29 |         </div>
30 |       </template>
31 |     </vue-horizontal-list>
32 |   </div>
33 | </template>
34 | 
35 | <script>
36 | import VueHorizontalList from "@/vue-horizontal-list.vue";
37 | 
38 | export default {
39 |   name: "left-right-slot",
40 |   components: {
41 |     VueHorizontalList,
42 |   },
43 |   data() {
44 |     return {
45 |       items: [0, 1, 2, 3, 4, 5].map((i) => {
46 |         return { title: `Left Right Slot ${i}`, content: `3 slots` };
47 |       }),
48 |       options: {},
49 |     };
50 |   },
51 | };
52 | </script>
53 | 
54 | <style scoped>
55 | .item {
56 |   padding: 24px;
57 |   border-radius: 3px;
58 |   background: #f5f5f5;
59 | }
60 | 
61 | .item-start-end {
62 |   background: #333;
63 |   color: #fff;
64 | 
65 |   display: flex;
66 |   justify-content: center;
67 |   align-items: center;
68 | }
69 | </style>
70 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-horizontal-list",
 3 |   "version": "1.1.0",
 4 |   "description": "A pure vue ssr friendly horizontal list implementation.",
 5 |   "author": "Fuxing Loh",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/fuxingloh/vue-horizontal-list.git"
 9 |   },
10 |   "bugs": "https://github.com/fuxingloh/vue-horizontal-list/issues",
11 |   "keywords": [
12 |     "vue",
13 |     "vuejs",
14 |     "horizontal",
15 |     "scroll view",
16 |     "airbnb list"
17 |   ],
18 |   "license": "MIT",
19 |   "private": false,
20 |   "main": "dist/vue-horizontal-list.ssr.js",
21 |   "browser": "dist/vue-horizontal-list.esm.js",
22 |   "module": "dist/vue-horizontal-list.esm.js",
23 |   "unpkg": "dist/vue-horizontal-list.min.js",
24 |   "files": [
25 |     "dist/*",
26 |     "src/**/*.vue"
27 |   ],
28 |   "scripts": {
29 |     "serve": "vue-cli-service serve examples/serve.js",
30 |     "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
31 |     "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
32 |     "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
33 |     "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife",
34 |     "examples:serve": "vue-cli-service serve examples/serve.js",
35 |     "examples:build": "vue-cli-service build examples/serve.js",
36 |     "prepublishOnly": "yarn build",
37 |     "prettier:format": "prettier --write .",
38 |     "prettier:check": "prettier --check ."
39 |   },
40 |   "dependencies": {
41 |     "smoothscroll-polyfill": "^0.4.4"
42 |   },
43 |   "devDependencies": {
44 |     "@babel/core": "^7.9.0",
45 |     "@babel/preset-env": "^7.9.5",
46 |     "@rollup/plugin-alias": "^2.2.0",
47 |     "@rollup/plugin-commonjs": "^11.1.0",
48 |     "@rollup/plugin-node-resolve": "^8.4.0",
49 |     "@rollup/plugin-replace": "^2.3.2",
50 |     "@vue/cli-plugin-babel": "^4.3.1",
51 |     "@vue/cli-service": "^4.3.1",
52 |     "cross-env": "^7.0.2",
53 |     "husky": "^4.3.0",
54 |     "minimist": "^1.2.5",
55 |     "prettier": "^2.1.2",
56 |     "pretty-quick": "^3.1.0",
57 |     "rollup": "^2.7.3",
58 |     "rollup-plugin-babel": "^4.4.0",
59 |     "rollup-plugin-terser": "^5.3.0",
60 |     "rollup-plugin-vue": "^5.1.6",
61 |     "vue": "^2.6.11",
62 |     "vue-template-compiler": "^2.6.11"
63 |   },
64 |   "peerDependencies": {
65 |     "vue": "^2.6.11"
66 |   },
67 |   "engines": {
68 |     "node": ">=10"
69 |   },
70 |   "husky": {
71 |     "hooks": {
72 |       "pre-commit": "pretty-quick --staged"
73 |     }
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/examples/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <h1>Vue Horizontal List</h1>
  4 |     <p>
  5 |       You can find all examples here
  6 |       <a
  7 |         href="https://github.com/fuxingloh/vue-horizontal-list/tree/master/examples"
  8 |         target="_blank"
  9 |         >in this folder</a
 10 |       >.
 11 |     </p>
 12 | 
 13 |     <simple />
 14 | 
 15 |     <position-start />
 16 | 
 17 |     <full-width />
 18 | 
 19 |     <responsive />
 20 | 
 21 |     <left-right-slot />
 22 | 
 23 |     <auto-play />
 24 | 
 25 |     <image-two />
 26 | 
 27 |     <image-three />
 28 | 
 29 |     <image-four />
 30 | 
 31 |     <image-five />
 32 | 
 33 |     <nav-prev-next-slot />
 34 | 
 35 |     <item-customization />
 36 |   </div>
 37 | </template>
 38 | 
 39 | <script>
 40 | import Vue from "vue";
 41 | import VueHorizontalList from "@/vue-horizontal-list.vue";
 42 | import Simple from "./simple";
 43 | import PositionStart from "./position-start";
 44 | import FullWidth from "./full-width";
 45 | import Responsive from "./responsive";
 46 | import ItemCustomization from "./item-customization";
 47 | import AutoPlay from "./auto-play";
 48 | import LeftRightSlot from "./left-right-slot";
 49 | import NavPrevNextSlot from "./nav-prev-next-slot";
 50 | import ImageTwo from "./image-two";
 51 | import ImageThree from "./image-three";
 52 | import ImageFour from "./image-four";
 53 | import ImageFive from "./image-five";
 54 | 
 55 | export default Vue.extend({
 56 |   name: "Index",
 57 |   components: {
 58 |     ImageFive,
 59 |     ImageFour,
 60 |     ImageThree,
 61 |     ImageTwo,
 62 |     NavPrevNextSlot,
 63 |     LeftRightSlot,
 64 |     AutoPlay,
 65 |     ItemCustomization,
 66 |     Responsive,
 67 |     FullWidth,
 68 |     PositionStart,
 69 |     Simple,
 70 |     VueHorizontalList,
 71 |   },
 72 | });
 73 | </script>
 74 | 
 75 | <style>
 76 | body {
 77 |   font-family: "-apple-system", "system-ui", "BlinkMacSystemFont", "Segoe UI",
 78 |     "Roboto", "Helvetica Neue", "Arial", "sans-serif";
 79 |   margin: 0;
 80 |   padding: 0;
 81 | }
 82 | 
 83 | h1,
 84 | h2,
 85 | h3,
 86 | h4,
 87 | h5,
 88 | h6 {
 89 |   margin: 0 0 8px;
 90 | }
 91 | 
 92 | p {
 93 |   margin: 0;
 94 |   font-size: 17px;
 95 |   line-height: 1.5;
 96 |   font-weight: 500;
 97 |   color: #333;
 98 |   word-break: break-word;
 99 | }
100 | </style>
101 | 
102 | <style scoped>
103 | #app {
104 |   max-width: 1400px;
105 | 
106 |   margin-left: auto;
107 |   margin-right: auto;
108 | 
109 |   padding: 80px 24px;
110 | }
111 | 
112 | @media (min-width: 1200px) {
113 |   #app {
114 |     padding-left: 80px;
115 |     padding-right: 80px;
116 |   }
117 | }
118 | 
119 | #app > div {
120 |   margin: 48px 0;
121 | }
122 | </style>
123 | 


--------------------------------------------------------------------------------
/examples/image-two.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <h2>Image Two</h2>
  4 | 
  5 |     <vue-horizontal-list :items="items" :options="options">
  6 |       <template v-slot:default="{ item }">
  7 |         <div class="item">
  8 |           <div class="image-boxed">
  9 |             <img :src="item.image" />
 10 |           </div>
 11 | 
 12 |           <div class="content">
 13 |             <h3>{{ item.title }}</h3>
 14 |             <p>{{ item.content }}</p>
 15 |           </div>
 16 |         </div>
 17 |       </template>
 18 |     </vue-horizontal-list>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script>
 23 | import VueHorizontalList from "@/vue-horizontal-list.vue";
 24 | 
 25 | export default {
 26 |   name: "image-two",
 27 |   components: {
 28 |     VueHorizontalList,
 29 |   },
 30 |   data() {
 31 |     return {
 32 |       items: [
 33 |         {
 34 |           title: "Sed non ante non cras amet",
 35 |           content:
 36 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non sagittis leo. Vestibulum sit amet metus nec neque dignissim dapibus.",
 37 |           image: "https://picsum.photos/id/1015/600/600",
 38 |         },
 39 |         {
 40 |           title: "Curabitur sit amet nunc",
 41 |           content:
 42 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id mollis erat. Aliquam erat volutpat. Nunc erat lacus, rhoncus nec.",
 43 |           image: "https://picsum.photos/id/1019/600/600",
 44 |         },
 45 |         {
 46 |           title: "Proin pharetra, ante metus",
 47 |           content:
 48 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac diam ac ex efficitur posuere. Pellentesque cursus pellentesque risus, non.",
 49 |           image: "https://picsum.photos/id/1039/600/600",
 50 |         },
 51 |         {
 52 |           title: "Cras pharetra non enim a",
 53 |           content:
 54 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada varius nibh, a malesuada nisi feugiat eget. Aenean convallis semper.",
 55 |           image: "https://picsum.photos/id/1042/600/600",
 56 |         },
 57 |         {
 58 |           title: "Proin vulputate, augue eu accumsan",
 59 |           content:
 60 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tempor libero sit amet mollis. Praesent quis leo erat. Integer.",
 61 |           image: "https://picsum.photos/id/1044/600/600",
 62 |         },
 63 |         {
 64 |           title: "Maecenas feugiat magna sapien in",
 65 |           content:
 66 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet fringilla ante. Quisque at ipsum non lacus consequat dictum.",
 67 |           image: "https://picsum.photos/id/1057/600/600",
 68 |         },
 69 |         {
 70 |           title: "Donec commodo sed enim at",
 71 |           content:
 72 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu condimentum risus. Praesent dignissim, neque nec pharetra vestibulum, libero odio.",
 73 |           image: "https://picsum.photos/id/1063/600/600",
 74 |         },
 75 |         {
 76 |           title: "In bibendum urna et turpis",
 77 |           content:
 78 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae ante volutpat leo vulputate volutpat et sed ex. Vivamus eu.",
 79 |           image: "https://picsum.photos/id/1076/600/600",
 80 |         },
 81 |         {
 82 |           title: "Phasellus iaculis dignissim erat at",
 83 |           content:
 84 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mattis quam scelerisque, eleifend purus gravida, scelerisque orci. Ut et turpis.",
 85 |           image: "https://picsum.photos/id/1083/600/600",
 86 |         },
 87 |       ],
 88 |       options: {
 89 |         responsive: [{ end: 576, size: 1 }, { size: 2 }],
 90 |       },
 91 |     };
 92 |   },
 93 | };
 94 | </script>
 95 | 
 96 | <style scoped>
 97 | .item {
 98 |   background: #f5f5f5;
 99 |   border-radius: 3px;
100 |   overflow: hidden;
101 |   display: flex;
102 | }
103 | 
104 | .content {
105 |   padding: 24px;
106 | }
107 | 
108 | .content > * {
109 |   overflow: hidden;
110 |   display: -webkit-box;
111 |   text-overflow: ellipsis;
112 |   word-break: break-word;
113 | 
114 |   -webkit-box-orient: vertical;
115 | }
116 | 
117 | .content h3 {
118 |   -webkit-line-clamp: 1;
119 | }
120 | 
121 | .content p {
122 |   -webkit-line-clamp: 2;
123 | }
124 | 
125 | .image-boxed {
126 |   flex: 0 0 25%;
127 |   max-width: 25%;
128 | }
129 | 
130 | img {
131 |   object-fit: cover;
132 |   width: 100%;
133 |   height: 100%;
134 | }
135 | </style>
136 | 


--------------------------------------------------------------------------------
/examples/image-three.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <h2>Image Three</h2>
  4 | 
  5 |     <vue-horizontal-list :items="items" :options="options">
  6 |       <template v-slot:default="{ item }">
  7 |         <div>
  8 |           <div class="image-container">
  9 |             <img :src="item.image" />
 10 |           </div>
 11 | 
 12 |           <div class="subtitle">SUBTITLE • FOCUS</div>
 13 | 
 14 |           <h3>{{ item.title }}</h3>
 15 |           <p>{{ item.content }}</p>
 16 |         </div>
 17 |       </template>
 18 |     </vue-horizontal-list>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script>
 23 | import VueHorizontalList from "@/vue-horizontal-list.vue";
 24 | 
 25 | export default {
 26 |   name: "image-three",
 27 |   components: {
 28 |     VueHorizontalList,
 29 |   },
 30 |   data() {
 31 |     return {
 32 |       items: [
 33 |         {
 34 |           title: "Sed non ante non cras amet",
 35 |           content:
 36 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non sagittis leo. Vestibulum sit amet metus nec neque dignissim dapibus.",
 37 |           image: "https://picsum.photos/id/1015/600/600",
 38 |         },
 39 |         {
 40 |           title: "Curabitur sit amet nunc",
 41 |           content:
 42 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id mollis erat. Aliquam erat volutpat. Nunc erat lacus, rhoncus nec.",
 43 |           image: "https://picsum.photos/id/1019/600/600",
 44 |         },
 45 |         {
 46 |           title: "Proin pharetra, ante metus",
 47 |           content:
 48 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac diam ac ex efficitur posuere. Pellentesque cursus pellentesque risus, non.",
 49 |           image: "https://picsum.photos/id/1039/600/600",
 50 |         },
 51 |         {
 52 |           title: "Cras pharetra non enim a",
 53 |           content:
 54 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada varius nibh, a malesuada nisi feugiat eget. Aenean convallis semper.",
 55 |           image: "https://picsum.photos/id/1042/600/600",
 56 |         },
 57 |         {
 58 |           title: "Proin vulputate, augue eu accumsan",
 59 |           content:
 60 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tempor libero sit amet mollis. Praesent quis leo erat. Integer.",
 61 |           image: "https://picsum.photos/id/1044/600/600",
 62 |         },
 63 |         {
 64 |           title: "Maecenas feugiat magna sapien in",
 65 |           content:
 66 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet fringilla ante. Quisque at ipsum non lacus consequat dictum.",
 67 |           image: "https://picsum.photos/id/1057/600/600",
 68 |         },
 69 |         {
 70 |           title: "Donec commodo sed enim at",
 71 |           content:
 72 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu condimentum risus. Praesent dignissim, neque nec pharetra vestibulum, libero odio.",
 73 |           image: "https://picsum.photos/id/1063/600/600",
 74 |         },
 75 |         {
 76 |           title: "In bibendum urna et turpis",
 77 |           content:
 78 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae ante volutpat leo vulputate volutpat et sed ex. Vivamus eu.",
 79 |           image: "https://picsum.photos/id/1076/600/600",
 80 |         },
 81 |         {
 82 |           title: "Phasellus iaculis dignissim erat at",
 83 |           content:
 84 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mattis quam scelerisque, eleifend purus gravida, scelerisque orci. Ut et turpis.",
 85 |           image: "https://picsum.photos/id/1083/600/600",
 86 |         },
 87 |       ],
 88 |       options: {
 89 |         responsive: [
 90 |           { end: 576, size: 1 },
 91 |           { start: 576, end: 768, size: 2 },
 92 |           { size: 3 },
 93 |         ],
 94 |       },
 95 |     };
 96 |   },
 97 | };
 98 | </script>
 99 | 
100 | <style scoped>
101 | p {
102 |   margin-top: 4px;
103 | 
104 |   overflow: hidden;
105 |   display: -webkit-box;
106 |   text-overflow: ellipsis;
107 |   word-break: break-word;
108 | 
109 |   -webkit-box-orient: vertical;
110 |   -webkit-line-clamp: 2;
111 | }
112 | 
113 | .subtitle {
114 |   margin-top: 12px;
115 |   font-size: 14px;
116 |   font-weight: 500;
117 |   margin-bottom: 6px;
118 | }
119 | 
120 | .image-container {
121 |   border-radius: 3px;
122 |   overflow: hidden;
123 |   position: relative;
124 |   width: 100%;
125 |   padding-top: 60%;
126 | }
127 | 
128 | img {
129 |   object-fit: cover;
130 |   width: 100%;
131 |   height: 100%;
132 | 
133 |   position: absolute;
134 |   top: 0;
135 |   bottom: 0;
136 |   left: 0;
137 |   right: 0;
138 | }
139 | </style>
140 | 


--------------------------------------------------------------------------------
/examples/image-four.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <h2>Image Four</h2>
  4 | 
  5 |     <vue-horizontal-list :items="items" :options="options">
  6 |       <template v-slot:default="{ item }">
  7 |         <div>
  8 |           <div class="image-container">
  9 |             <img :src="item.image" />
 10 |           </div>
 11 | 
 12 |           <div class="subtitle">
 13 |             <div>BEST</div>
 14 |             <div>3/5</div>
 15 |           </div>
 16 | 
 17 |           <h4>{{ item.title }}</h4>
 18 |           <p><b>$200 USD</b> / night</p>
 19 |         </div>
 20 |       </template>
 21 |     </vue-horizontal-list>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 | import VueHorizontalList from "@/vue-horizontal-list.vue";
 27 | 
 28 | export default {
 29 |   name: "image-four",
 30 |   components: {
 31 |     VueHorizontalList,
 32 |   },
 33 |   data() {
 34 |     return {
 35 |       items: [
 36 |         {
 37 |           title: "Sed non ante non cras amet",
 38 |           content:
 39 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non sagittis leo. Vestibulum sit amet metus nec neque dignissim dapibus.",
 40 |           image: "https://picsum.photos/id/1015/600/600",
 41 |         },
 42 |         {
 43 |           title: "Curabitur sit amet nunc",
 44 |           content:
 45 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id mollis erat. Aliquam erat volutpat. Nunc erat lacus, rhoncus nec.",
 46 |           image: "https://picsum.photos/id/1019/600/600",
 47 |         },
 48 |         {
 49 |           title: "Proin pharetra, ante metus",
 50 |           content:
 51 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac diam ac ex efficitur posuere. Pellentesque cursus pellentesque risus, non.",
 52 |           image: "https://picsum.photos/id/1039/600/600",
 53 |         },
 54 |         {
 55 |           title: "Cras pharetra non enim a",
 56 |           content:
 57 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada varius nibh, a malesuada nisi feugiat eget. Aenean convallis semper.",
 58 |           image: "https://picsum.photos/id/1042/600/600",
 59 |         },
 60 |         {
 61 |           title: "Proin vulputate, augue eu accumsan",
 62 |           content:
 63 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tempor libero sit amet mollis. Praesent quis leo erat. Integer.",
 64 |           image: "https://picsum.photos/id/1044/600/600",
 65 |         },
 66 |         {
 67 |           title: "Maecenas feugiat magna sapien in",
 68 |           content:
 69 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet fringilla ante. Quisque at ipsum non lacus consequat dictum.",
 70 |           image: "https://picsum.photos/id/1057/600/600",
 71 |         },
 72 |         {
 73 |           title: "Donec commodo sed enim at",
 74 |           content:
 75 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu condimentum risus. Praesent dignissim, neque nec pharetra vestibulum, libero odio.",
 76 |           image: "https://picsum.photos/id/1063/600/600",
 77 |         },
 78 |         {
 79 |           title: "In bibendum urna et turpis",
 80 |           content:
 81 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae ante volutpat leo vulputate volutpat et sed ex. Vivamus eu.",
 82 |           image: "https://picsum.photos/id/1076/600/600",
 83 |         },
 84 |         {
 85 |           title: "Phasellus iaculis dignissim erat at",
 86 |           content:
 87 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mattis quam scelerisque, eleifend purus gravida, scelerisque orci. Ut et turpis.",
 88 |           image: "https://picsum.photos/id/1083/600/600",
 89 |         },
 90 |       ],
 91 |       options: {
 92 |         responsive: [
 93 |           { end: 576, size: 1 },
 94 |           { start: 576, end: 768, size: 2 },
 95 |           { start: 768, end: 992, size: 3 },
 96 |           { size: 4 },
 97 |         ],
 98 |       },
 99 |     };
100 |   },
101 | };
102 | </script>
103 | 
104 | <style scoped>
105 | p {
106 |   margin-top: 6px;
107 | }
108 | 
109 | h4 {
110 |   margin: 0;
111 | }
112 | 
113 | .subtitle {
114 |   margin-top: 8px;
115 |   margin-bottom: 6px;
116 |   display: flex;
117 |   justify-content: space-between;
118 |   font-size: 14px;
119 |   font-weight: 500;
120 | }
121 | 
122 | .image-container {
123 |   border-radius: 3px;
124 |   overflow: hidden;
125 |   position: relative;
126 |   width: 100%;
127 |   padding-top: 60%;
128 | }
129 | 
130 | img {
131 |   object-fit: cover;
132 |   width: 100%;
133 |   height: 100%;
134 | 
135 |   position: absolute;
136 |   top: 0;
137 |   bottom: 0;
138 |   left: 0;
139 |   right: 0;
140 | }
141 | </style>
142 | 


--------------------------------------------------------------------------------
/examples/image-five.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <h2>Image Five</h2>
  4 | 
  5 |     <vue-horizontal-list :items="items" :options="options">
  6 |       <template v-slot:default="{ item }">
  7 |         <div>
  8 |           <div class="image-container">
  9 |             <div class="image-content">
 10 |               <img :src="item.image" />
 11 | 
 12 |               <div class="image-text">
 13 |                 <h2>{{ item.title }}</h2>
 14 |               </div>
 15 |             </div>
 16 |           </div>
 17 | 
 18 |           <div class="subtitle">SUBTITLE • FOCUS</div>
 19 | 
 20 |           <p>{{ item.content }}</p>
 21 |         </div>
 22 |       </template>
 23 |     </vue-horizontal-list>
 24 |   </div>
 25 | </template>
 26 | 
 27 | <script>
 28 | import VueHorizontalList from "@/vue-horizontal-list.vue";
 29 | 
 30 | export default {
 31 |   name: "image-five",
 32 |   components: {
 33 |     VueHorizontalList,
 34 |   },
 35 |   data() {
 36 |     return {
 37 |       items: [
 38 |         {
 39 |           title: "Sed non ante non cras amet",
 40 |           content:
 41 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non sagittis leo. Vestibulum sit amet metus nec neque dignissim dapibus.",
 42 |           image: "https://picsum.photos/id/1015/600/600",
 43 |         },
 44 |         {
 45 |           title: "Curabitur sit amet nunc",
 46 |           content:
 47 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id mollis erat. Aliquam erat volutpat. Nunc erat lacus, rhoncus nec.",
 48 |           image: "https://picsum.photos/id/1019/600/600",
 49 |         },
 50 |         {
 51 |           title: "Proin pharetra, ante metus",
 52 |           content:
 53 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac diam ac ex efficitur posuere. Pellentesque cursus pellentesque risus, non.",
 54 |           image: "https://picsum.photos/id/1039/600/600",
 55 |         },
 56 |         {
 57 |           title: "Cras pharetra non enim a",
 58 |           content:
 59 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada varius nibh, a malesuada nisi feugiat eget. Aenean convallis semper.",
 60 |           image: "https://picsum.photos/id/1042/600/600",
 61 |         },
 62 |         {
 63 |           title: "Proin vulputate, augue eu accumsan",
 64 |           content:
 65 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla tempor libero sit amet mollis. Praesent quis leo erat. Integer.",
 66 |           image: "https://picsum.photos/id/1044/600/600",
 67 |         },
 68 |         {
 69 |           title: "Maecenas feugiat magna sapien in",
 70 |           content:
 71 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet fringilla ante. Quisque at ipsum non lacus consequat dictum.",
 72 |           image: "https://picsum.photos/id/1057/600/600",
 73 |         },
 74 |         {
 75 |           title: "Donec commodo sed enim at",
 76 |           content:
 77 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu condimentum risus. Praesent dignissim, neque nec pharetra vestibulum, libero odio.",
 78 |           image: "https://picsum.photos/id/1063/600/600",
 79 |         },
 80 |         {
 81 |           title: "In bibendum urna et turpis",
 82 |           content:
 83 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae ante volutpat leo vulputate volutpat et sed ex. Vivamus eu.",
 84 |           image: "https://picsum.photos/id/1076/600/600",
 85 |         },
 86 |         {
 87 |           title: "Phasellus iaculis dignissim erat at",
 88 |           content:
 89 |             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mattis quam scelerisque, eleifend purus gravida, scelerisque orci. Ut et turpis.",
 90 |           image: "https://picsum.photos/id/1083/600/600",
 91 |         },
 92 |       ],
 93 |       options: {},
 94 |     };
 95 |   },
 96 | };
 97 | </script>
 98 | 
 99 | <style scoped>
100 | p,
101 | h3,
102 | h2 {
103 |   margin-top: 4px;
104 | 
105 |   overflow: hidden;
106 |   display: -webkit-box;
107 |   text-overflow: ellipsis;
108 |   word-break: break-word;
109 | 
110 |   -webkit-box-orient: vertical;
111 |   -webkit-line-clamp: 2;
112 | }
113 | 
114 | .subtitle {
115 |   margin-top: 10px;
116 |   font-size: 12px;
117 |   font-weight: 600;
118 |   color: black;
119 |   margin-bottom: 8px;
120 | }
121 | 
122 | .image-container {
123 |   border-radius: 3px;
124 |   overflow: hidden;
125 |   position: relative;
126 |   width: 100%;
127 |   padding-top: 120%;
128 | }
129 | 
130 | .image-content {
131 | }
132 | 
133 | .image-text {
134 |   position: absolute;
135 |   left: 0;
136 |   right: 0;
137 |   top: 0;
138 |   bottom: 0;
139 | 
140 |   padding: 32px 24px;
141 |   display: flex;
142 |   align-items: flex-end;
143 |   background: rgba(0, 0, 0, 0.4);
144 | }
145 | 
146 | .image-text h2 {
147 |   margin: 0;
148 |   color: white;
149 |   text-align: center;
150 | }
151 | 
152 | img {
153 |   object-fit: cover;
154 |   width: 100%;
155 |   height: 100%;
156 | 
157 |   position: absolute;
158 |   top: 0;
159 |   bottom: 0;
160 |   left: 0;
161 |   right: 0;
162 | }
163 | </style>
164 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ## 👋 You might want to use [Vue Horizontal](https://github.com/fuxingloh/vue-horizontal) instead!
  2 | 
  3 | [Vue Horizontal](https://github.com/fuxingloh/vue-horizontal)
  4 | is another take on the horizontal layout written by me with an ultra simple implementation that is extensible and moves the
  5 | responsibility to the user rather than the library.
  6 | With zero dependencies, 3 KB for CDN users it's built for your production needs.
  7 | 
  8 | [Vue Horizontal](https://github.com/fuxingloh/vue-horizontal) is a rewrite of this library with many more focus such as
  9 | end-to-end testing on real browsers, SSG/SSR CI testing to make sure all code is SSG/SSR compliant for your SEO!
 10 | Documentation are also extensible with everything you can think of about horizontal layout documentation through and through.
 11 | 
 12 | [Vue Horizontal](https://github.com/fuxingloh/vue-horizontal) also contains a snippet dossier with many SPA/SSR/SSG
 13 | friendly recipes for your design needs.
 14 | [Vue Horizontal](https://vue-horizontal.fuxing.dev/) is not just a library, **it's a place for everything horizontal.**
 15 | 
 16 | ## Vue Horizontal List
 17 | 
 18 | A pure vue native horizontal list implementation for mobile/touch and responsive web.
 19 | Check it out here: [fuxingloh.github.io/vue-horizontal-list](https://fuxingloh.github.io/vue-horizontal-list/).
 20 | 
 21 | > 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.
 22 | 
 23 | [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
 24 | [![License MIT](https://img.shields.io/github/license/fuxingloh/vue-horizontal-list)](https://github.com/fuxingloh/vue-horizontal-list/blob/master/LICENSE)
 25 | [![Latest Release](https://img.shields.io/github/v/release/fuxingloh/vue-horizontal-list)](https://github.com/fuxingloh/vue-horizontal-list/releases)
 26 | [![Contributors](https://img.shields.io/github/contributors-anon/fuxingloh/vue-horizontal-list)](https://github.com/fuxingloh/vue-horizontal-list/graphs/contributors)
 27 | [![Issues](https://img.shields.io/github/issues/fuxingloh/vue-horizontal-list)](https://github.com/fuxingloh/vue-horizontal-list/issues)
 28 | [![GitHub Pages](https://github.com/fuxingloh/vue-horizontal-list/workflows/GitHub%20Pages/badge.svg)](https://fuxingloh.github.io/vue-horizontal-list/)
 29 | [![CI](https://github.com/fuxingloh/vue-horizontal-list/workflows/CI/badge.svg)](https://github.com/fuxingloh/vue-horizontal-list/actions?query=workflow%3ACI)
 30 | 
 31 | ---
 32 | 
 33 | [![vue-horizontal-list screenshot](demo.png)](https://nuxt-app.now.sh/vue-horizontal-list)
 34 | 
 35 | ## Installation
 36 | 
 37 | ```shell script
 38 | npm i vue-horizontal-list
 39 | # or
 40 | yarn add vue-horizontal-list
 41 | ```
 42 | 
 43 | Check out this [alternative project](https://github.com/fuxingloh/vue-horizontal) maintained by me for a new take on horizontal layout in vue.
 44 | 
 45 | #### Basic usage
 46 | 
 47 | ```vue
 48 | <vue-horizontal-list
 49 |   :items="items"
 50 |   :options="{
 51 |     responsive: [
 52 |       { end: 576, size: 1 },
 53 |       { start: 576, end: 768, size: 2 },
 54 |       { size: 3 },
 55 |     ],
 56 |   }"
 57 | >
 58 |   <template v-slot:default="{item}">
 59 |     <div class="item">
 60 |       <h5>{{item.title}}</h5>
 61 |       <p>{{item.content}}</p>
 62 |     </div>
 63 |   </template>
 64 | </vue-horizontal-list>
 65 | ```
 66 | 
 67 | ## Features
 68 | 
 69 | - Lightweight implementation with 1 dependencies.
 70 | - SSR supported
 71 | - Mobile touch screen friendly
 72 | - Invisible scroll bar for consistent Windows and MacOS browsing experience.
 73 | - Snap to the nearest item in the horizontal-list when scrolling.
 74 | - Windowed & Full-screen mode
 75 |   - The windowed mode will respect the container and not show overflowing item
 76 |   - Full-screen mode will show overflowing item, best result for small screen
 77 | - Dynamic responsive breakpoint configuration
 78 | - Navigation control will show up dynamically for larger screen
 79 | - Touch screen friendly
 80 | - Slideshow autoplay by [@Draccano](https://github.com/Draccano).
 81 | - Slot different content at the beginning, or the ending of the items list by [@Draccano](https://github.com/Draccano).
 82 | - Minimal config setup
 83 | - Tested on chrome, edge and safari
 84 | - [Demo](https://fuxingloh.github.io/vue-horizontal-list/)
 85 | - [Examples](https://github.com/fuxingloh/vue-horizontal-list/tree/master/examples)
 86 | 
 87 | ## All available options
 88 | 
 89 | ```js
 90 | const options = {
 91 |   item: {
 92 |     // css class to inject into each individual item
 93 |     class: "",
 94 |     // padding between each item
 95 |     padding: 12,
 96 |   },
 97 |   list: {
 98 |     // css class for the parent of item
 99 |     class: "",
100 |     // maximum width of the list it can extend to before switching to windowed mode, basically think of the bootstrap container max-width
101 |     // windowed is used to toggle between full-screen mode and container mode
102 |     windowed: 1200,
103 |     // padding of the list, if container < windowed what is the left-right padding of the list
104 |     // during full-screen mode the padding will added to left & right to centralise the item
105 |     padding: 24,
106 |   },
107 |   responsive: [
108 |     // responsive breakpoints to calculate how many items to show in the list at each width interval
109 |     // it will always fall back to these:
110 |     { end: 576, size: 1 },
111 |     { start: 576, end: 768, size: 2 },
112 |     { start: 768, end: 992, size: 3 },
113 |     { start: 992, end: 1200, size: 4 },
114 |     { start: 1200, size: 5 },
115 |   ],
116 |   navigation: {
117 |     // when to show navigation
118 |     start: 992,
119 |     color: "#000",
120 |   },
121 |   position: {
122 |     // Start from '1' on mounted.
123 |     start: 1,
124 |   },
125 |   autoplay: {
126 |     // enable/disable playing slideshow
127 |     play: true,
128 |     // the delay duration between slides in milliseconds
129 |     speed: 1800,
130 |     // if setup, the slideshow will be in the loop.
131 |     repeat: true,
132 |   },
133 | };
134 | ```
135 | 
136 | ## Advanced usage
137 | 
138 | ```vue
139 | <template>
140 |   <div id="app">
141 |     <section>
142 |       <vue-horizontal-list :items="items" :options="options">
143 |         <template v-slot:nav-prev>
144 |           <div>👈</div>
145 |         </template>
146 | 
147 |         <template v-slot:nav-next>
148 |           <div>👉</div>
149 |         </template>
150 | 
151 |         <template v-slot:start>
152 |           <div>First Item</div>
153 |         </template>
154 | 
155 |         <template v-slot:end>
156 |           <div>Last Item</div>
157 |         </template>
158 | 
159 |         <template v-slot:default="{ item }">
160 |           <div class="item">
161 |             <h5>{{ item.title }}</h5>
162 |             <p>{{ item.content }}</p>
163 |           </div>
164 |         </template>
165 |       </vue-horizontal-list>
166 |     </section>
167 |   </div>
168 | </template>
169 | 
170 | <script>
171 | import Vue from "vue";
172 | import VueHorizontalList from "@/vue-horizontal-list.vue";
173 | 
174 | export default Vue.extend({
175 |   name: "ServeDev",
176 |   components: {
177 |     VueHorizontalList,
178 |   },
179 |   data() {
180 |     return {
181 |       options: {
182 |         responsive: [
183 |           { end: 576, size: 1 },
184 |           { start: 576, end: 768, size: 2 },
185 |           { start: 768, end: 992, size: 3 },
186 |           { size: 4 },
187 |         ],
188 |         list: {
189 |           // 1200 because @media (min-width: 1200px) and therefore I want to switch to windowed mode
190 |           windowed: 1200,
191 | 
192 |           // Because: #app {padding: 80px 24px;}
193 |           padding: 24,
194 |         },
195 |         position: {
196 |           start: 2,
197 |         },
198 |         autoplay: { play: true, repeat: true, speed: 2500 },
199 |       },
200 |       items: [
201 |         { title: "Item 0", content: "Content item with description" },
202 |         { title: "Item 1", content: "Content item with description" },
203 |         { title: "Item 2", content: "Content item with description" },
204 |       ],
205 |     };
206 |   },
207 | });
208 | </script>
209 | 
210 | <style>
211 | body {
212 |   margin: 0;
213 |   padding: 0;
214 | }
215 | 
216 | #app {
217 |   max-width: 1400px;
218 | 
219 |   margin-left: auto;
220 |   margin-right: auto;
221 | 
222 |   padding: 80px 24px;
223 | }
224 | 
225 | @media (min-width: 1200px) {
226 |   #app {
227 |     padding-left: 80px;
228 |     padding-right: 80px;
229 |   }
230 | }
231 | </style>
232 | ```
233 | 
234 | ## Development
235 | 
236 | ```shell script
237 | yarn # to setup
238 | yarn run examples:serve # to dev and test
239 | ```
240 | 
241 | ## Contributions
242 | 
243 | For 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).
244 | 


--------------------------------------------------------------------------------
/src/vue-horizontal-list.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vue-horizontal-list" ref="container">
  3 |     <div class="vhl-navigation" v-if="width.window > _options.navigation.start">
  4 |       <div @click="prev" v-if="_hasPrev" class="vhl-btn-left">
  5 |         <slot name="nav-prev">
  6 |           <svg
  7 |             :fill="_options.navigation.color"
  8 |             width="32px"
  9 |             height="32px"
 10 |             viewBox="0 0 24 24"
 11 |           >
 12 |             <path
 13 |               d="M10.757 12l4.95 4.95a1 1 0 1 1-1.414 1.414l-5.657-5.657a1 1 0 0 1 0-1.414l5.657-5.657a1 1 0 0 1 1.414 1.414L10.757 12z"
 14 |             />
 15 |           </svg>
 16 |         </slot>
 17 |       </div>
 18 | 
 19 |       <div @click="next" v-if="_hasNext" class="vhl-btn-right">
 20 |         <slot name="nav-next">
 21 |           <svg
 22 |             :fill="_options.navigation.color"
 23 |             width="32px"
 24 |             height="32px"
 25 |             viewBox="0 0 24 24"
 26 |           >
 27 |             <path
 28 |               d="M13.314 12.071l-4.95-4.95a1 1 0 0 1 1.414-1.414l5.657 5.657a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 0 1-1.414-1.414l4.95-4.95z"
 29 |             />
 30 |           </svg>
 31 |         </slot>
 32 |       </div>
 33 |     </div>
 34 | 
 35 |     <div class="vhl-container" :style="_style.container">
 36 |       <div
 37 |         class="vhl-list"
 38 |         ref="list"
 39 |         :class="_options.list.class"
 40 |         :style="_style.list"
 41 |         @scroll="scrollHandler"
 42 |       >
 43 |         <div
 44 |           v-for="item in _items"
 45 |           ref="item"
 46 |           class="vhl-item"
 47 |           :class="_options.item.class"
 48 |           :style="_style.item"
 49 |         >
 50 |           <slot v-if="item.type === 'start'" name="start"></slot>
 51 |           <slot v-else-if="item.type === 'end'" name="end"></slot>
 52 |           <slot v-else-if="item.type === 'item'" v-bind:item="item.item">{{
 53 |             item
 54 |           }}</slot>
 55 |         </div>
 56 | 
 57 |         <div :style="_style.tail"></div>
 58 |       </div>
 59 |     </div>
 60 |   </div>
 61 | </template>
 62 | 
 63 | <script>
 64 | export default {
 65 |   name: "VueHorizontalList",
 66 |   props: {
 67 |     /**
 68 |      * items to display in horizontal-list
 69 |      */
 70 |     items: {
 71 |       type: Array,
 72 |       required: true,
 73 |     },
 74 | 
 75 |     /**
 76 |      * item.class = css class for each individual item.
 77 |      * item.padding = padding between each item in the list.
 78 |      *
 79 |      * list.class = css class for the parent of item
 80 |      * list.windowed = maximum width of the list it can extend to, basically the container max-width
 81 |      * list.padding = padding of the list, if container < windowed what is the left-right padding of the list
 82 |      *
 83 |      * responsive breakpoints to calculate how many items to show in the list at each width interval
 84 |      * Examples:
 85 |      * [{size: 5}] show 5 items regardless
 86 |      * [{end: 992, size: 3}},{size: 4}] < 992 show 3 items, else show 4 items
 87 |      * [{end: 576, size: 1}, {start: 576, end: 992, size: 2}, {size: 3}] < 576 show 1, 576 - 992 show 2, else show 3
 88 |      *
 89 |      * These are the default responsive fallback, if you don't have a catch all, it will fallback to this.
 90 |      * [{end: 576, size: 1},
 91 |      * {start: 576, end: 768, size: 2},
 92 |      * {start: 768, end: 992, size: 3},
 93 |      * {start: 992, end: 1200, size: 4},
 94 |      * {start: 1200, size: 5}]
 95 |      */
 96 |     options: {
 97 |       type: Object,
 98 |       required: false,
 99 |     },
100 |   },
101 |   data() {
102 |     return {
103 |       /**
104 |        * Current item position of list
105 |        */
106 |       position: 0,
107 | 
108 |       /**
109 |        * Width of item, list and window
110 |        */
111 |       width: {
112 |         container: 0,
113 |         window: 576,
114 |       },
115 |       /**
116 |        * Debounce timer of the scroll
117 |        */
118 |       scrollTimer: null,
119 |       /**
120 |        * Interval of the autoPlay
121 |        */
122 |       autoPlayInterval: null,
123 |     };
124 |   },
125 |   mounted() {
126 |     this.$resize = () => {
127 |       this.width.window = window.innerWidth;
128 |       this.width.container = this.$refs.container.clientWidth;
129 |     };
130 | 
131 |     // TODO(fuxing): Need to re-do this
132 |     // Added a simple SSR fix, need to look into it for optimization in the future
133 |     require("smoothscroll-polyfill").polyfill();
134 | 
135 |     this.$resize();
136 |     window.addEventListener("resize", this.$resize);
137 | 
138 |     if (this._options.position.start) {
139 |       this.$nextTick(() => {
140 |         this.go(this._options.position.start);
141 |       });
142 |     }
143 | 
144 |     if (this._options.autoplay.play) {
145 |       this.runAutoPlay();
146 |     }
147 |   },
148 |   beforeDestroy() {
149 |     window.removeEventListener("resize", this.$resize);
150 |     if (this.autoPlayInterval) {
151 |       clearInterval(this.autoPlayInterval);
152 |     }
153 |   },
154 |   computed: {
155 |     _items() {
156 |       return [
157 |         ...(this.$slots["start"] ? [{ type: "start" }] : []),
158 |         ...this.items.map((value) => ({ type: "item", item: value })),
159 |         ...(this.$slots["end"] ? [{ type: "end" }] : []),
160 |       ];
161 |     },
162 |     _length() {
163 |       return this._items.length;
164 |     },
165 | 
166 |     _options() {
167 |       const options = this.options;
168 | 
169 |       return {
170 |         navigation: {
171 |           start: options?.navigation?.start ?? 992,
172 |           // TODO(fuxing): Deprecate this in favor of navigation slot
173 |           color: options?.navigation?.color ?? "#000",
174 |         },
175 |         item: {
176 |           class: options?.item?.class ?? "",
177 |           padding: options?.item?.padding ?? 16,
178 |         },
179 |         list: {
180 |           class: options?.list?.class ?? "",
181 |           windowed: options?.list?.windowed ?? 1200,
182 |           padding: options?.list?.padding ?? 24,
183 |         },
184 |         responsive: [
185 |           ...(options?.responsive ?? []),
186 | 
187 |           // Fallback default responsive
188 |           { end: 576, size: 1 },
189 |           { start: 576, end: 768, size: 2 },
190 |           { start: 768, end: 992, size: 3 },
191 |           { start: 992, end: 1200, size: 4 },
192 |           { start: 1200, size: 5 },
193 |         ],
194 |         position: {
195 |           start: options?.position?.start ?? 0,
196 |         },
197 |         autoplay: {
198 |           play: options?.autoplay?.play ?? false,
199 |           speed: options?.autoplay?.speed ?? 2000,
200 |           repeat: options?.autoplay?.repeat ?? false,
201 |         },
202 |       };
203 |     },
204 | 
205 |     _style() {
206 |       const style = {
207 |         container: {},
208 |         list: {},
209 |         item: {},
210 |         tail: {},
211 |       };
212 | 
213 |       const workingWidth = this._workingWidth;
214 |       const size = this._size;
215 | 
216 |       // Full Screen Mode
217 |       if (this.width.window < this._options.list.windowed) {
218 |         style.container.marginLeft = `-${this._options.list.padding}px`;
219 |         style.container.marginRight = `-${this._options.list.padding}px`;
220 | 
221 |         style.item.width = `${
222 |           (workingWidth - (size - 1) * this._options.item.padding) / size
223 |         }px`;
224 |         style.item.paddingLeft = `${this._options.list.padding}px`;
225 |         style.item.paddingRight = `${this._options.item.padding}px`;
226 |         style.item.marginRight = `-${this._options.list.padding}px`;
227 |       }
228 | 
229 |       // Windowed Mode
230 |       else {
231 |         style.item.paddingLeft = `${this._options.item.padding / 2}px`;
232 |         style.item.paddingRight = `${this._options.item.padding / 2}px`;
233 | 
234 |         style.container.marginLeft = `-${this._options.item.padding / 2}px`;
235 |         style.container.marginRight = `-${this._options.item.padding / 2}px`;
236 | 
237 |         style.item.width = `${
238 |           (workingWidth - (size - 1) * this._options.item.padding) / size
239 |         }px`;
240 |       }
241 | 
242 |       return style;
243 |     },
244 | 
245 |     _itemWidth() {
246 |       return (
247 |         (this._workingWidth - (this._size - 1) * this._options.item.padding) /
248 |         this._size
249 |       );
250 |     },
251 | 
252 |     /**
253 |      * @return number actual width of the container
254 |      */
255 |     _workingWidth() {
256 |       // Full Screen Mode
257 |       if (this.width.window < this._options.list.windowed) {
258 |         return this.width.window - this._options.list.padding * 2;
259 |       }
260 | 
261 |       // Windowed Mode
262 |       else {
263 |         return this.width.container;
264 |       }
265 |     },
266 | 
267 |     /**
268 |      * @return visible items in horizontal list at the current width/state
269 |      */
270 |     _size() {
271 |       const width = this._workingWidth;
272 |       return this._options.responsive.find((value) => {
273 |         return (
274 |           (!value.start || value.start <= width) &&
275 |           (!value.end || value.end >= width)
276 |         );
277 |       }).size;
278 |     },
279 | 
280 |     /**
281 |      * @return boolean whether there is prev set of items for navigation
282 |      * @private internal use
283 |      */
284 |     _hasNext() {
285 |       return this._length > this.position + this._size;
286 |     },
287 | 
288 |     /**
289 |      * @return boolean whether there is next set of items for navigation
290 |      * @private internal use
291 |      */
292 |     _hasPrev() {
293 |       return this.position > 0;
294 |     },
295 |   },
296 |   methods: {
297 |     /**
298 |      * @param position of item to scroll to
299 |      */
300 |     go(position) {
301 |       const maxPosition = this._length - this._size;
302 |       this.position = position > maxPosition ? maxPosition : position;
303 | 
304 |       const left =
305 |         this._itemWidth * this.position +
306 |         this.position * this._options.item.padding;
307 |       this.$refs.list.scrollTo({ top: 0, left: left, behavior: "smooth" });
308 |     },
309 |     /**
310 |      * Run autoPlay slide show
311 |      */
312 |     runAutoPlay() {
313 |       this.autoPlayInterval = setInterval(
314 |         function () {
315 |           if (
316 |             this._options.autoplay.repeat &&
317 |             this.position === this._length - this._size
318 |           ) {
319 |             this.position = 0;
320 |             this.go(this.position);
321 |           } else {
322 |             this.position += 1;
323 |             this.go(this.position);
324 |           }
325 |         }.bind(this),
326 |         this._options.autoplay.speed
327 |       );
328 |     },
329 |     /**
330 |      * Stop autoPlay slide show
331 |      */
332 |     stopAutoPlay() {
333 |       clearInterval(this.autoPlayInterval);
334 |     },
335 |     /**
336 |      * Go to a set of previous items
337 |      */
338 |     prev() {
339 |       this.go(this.position - this._size);
340 |     },
341 | 
342 |     /**
343 |      * Go to a set of next items
344 |      */
345 |     next() {
346 |       this.go(this.position + this._size);
347 |     },
348 |     /**
349 |      * On horizontal scroll re-evaluate the actual position
350 |      */
351 |     scrollHandler() {
352 |       clearTimeout(this.scrollTimer);
353 | 
354 |       //Renew timer
355 |       this.scrollTimer = setTimeout(
356 |         function () {
357 |           const parentLeftOffset = this.$refs["list"].getBoundingClientRect()
358 |             .left;
359 | 
360 |           let items = this._items.map((item, index) => {
361 |             const itemLeftOffset = this.$refs.item[
362 |               index
363 |             ].getBoundingClientRect().left;
364 |             return Math.abs(itemLeftOffset - parentLeftOffset);
365 |           });
366 | 
367 |           this.position = items.indexOf(Math.min(...items));
368 |         }.bind(this),
369 |         50
370 |       );
371 |     },
372 |   },
373 |   watch: {
374 |     "options.autoplay.play": function (newVal, oldVal) {
375 |       if (!newVal) {
376 |         this.stopAutoPlay();
377 |       } else {
378 |         this.runAutoPlay();
379 |       }
380 |     },
381 |   },
382 | };
383 | </script>
384 | 
385 | <style scoped>
386 | .vue-horizontal-list {
387 |   position: relative;
388 | }
389 | 
390 | .vhl-navigation {
391 |   display: flex;
392 |   align-items: center;
393 |   position: absolute;
394 |   width: 100%;
395 |   height: 100%;
396 | 
397 |   margin-top: -6px;
398 | }
399 | 
400 | .vhl-btn-left,
401 | .vhl-btn-right {
402 |   width: 48px;
403 |   height: 48px;
404 |   display: flex;
405 |   align-items: center;
406 |   justify-content: center;
407 | 
408 |   border-radius: 24px;
409 |   background: white;
410 |   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
411 | 
412 |   z-index: 2;
413 | }
414 | 
415 | .vhl-btn-left:hover,
416 | .vhl-btn-right:hover {
417 |   cursor: pointer;
418 | }
419 | 
420 | .vhl-btn-left {
421 |   margin-left: -24px;
422 |   margin-right: auto;
423 | }
424 | 
425 | .vhl-btn-right {
426 |   margin-left: auto;
427 |   margin-right: -24px;
428 | }
429 | 
430 | .vhl-container {
431 |   overflow-y: hidden;
432 |   height: 100%;
433 |   margin-bottom: -24px;
434 | }
435 | 
436 | .vhl-list {
437 |   display: flex;
438 |   padding-bottom: 24px;
439 |   margin-bottom: -24px;
440 | 
441 |   overflow-x: scroll;
442 |   overflow-y: hidden;
443 |   scroll-behavior: smooth;
444 |   -webkit-overflow-scrolling: touch;
445 |   scroll-snap-type: x mandatory;
446 | }
447 | 
448 | .vhl-item {
449 |   box-sizing: content-box;
450 | 
451 |   padding-top: 24px;
452 |   padding-bottom: 24px;
453 | 
454 |   z-index: 1;
455 | 
456 |   /* Prevent content from collapsing when empty. E.g. image while loading height=0. */
457 |   min-height: 1px;
458 | }
459 | 
460 | .vhl-list > * {
461 |   scroll-snap-align: start;
462 |   flex-shrink: 0;
463 | }
464 | </style>
465 | 


--------------------------------------------------------------------------------