Horizontal Scroller Layout For Vue – vue-horizontal

This is the upgraded version of the horizontal-list component that helps developers generate a horizontal scroller for showcasing anything.

Features:

• SSR/SSG/SPA: all modes of rendering supported
• Mobile & responsive web friendly
• Scroll bar or customizable button navigation
• Snap to the nearest item when scrolling
• Moves the responsibilities of the CSS to the user
• Extensible for any use case with a collection of recipes
• End-to-end tested on all major browser at code merge with 240+ test cases

How to use it:

1. Import and register the component.

import VueHorizontal from 'vue-horizontal';

export default {
  components: {VueHorizontal}
}
// or
Vue.use(VueHorizontal);

2. Add the <vue-horizontal> component to the template.

<vue-horizontal>
</vue-horizontal>

3. Add slides to the scroller.

<vue-horizontal>
  <div class="item">
    <h3>Item 1</h3>
    <p>As you can see these are just html elements.</p>
  </div>
  <section>
    <h4>Item 2</h4>
  </section>
  <section>
    <h3>Item 3</h3>
  </section>
  <section v-for="item in items" :key="item.i">
    <h3>{{ item.title }}</h3>
    <p>{{ item.content }}</p>
  </section>
  <section>
    <h3>Last Item</h3>
  </section>
</vue-horizontal>

export default {
  data() {
    return {
      items: [...Array(5).keys()].map((i) => {
        return {i, title: `v-for: ${i}`, content: `🚀 Paragraph ${i}`};
      }),
    }
  }
}

4. Available component props.

button: {
  type: Boolean,
  default: () => true,
},
buttonBetween: {
  type: Boolean,
  default: () => true
},
scroll: {
  type: Boolean,
  default: () => false,
},
responsive: {
  type: Boolean,
  default: () => false,
},
/**
 * Move window, indicates the percent of width to travel when nav is triggered.
 */
displacement: {
  type: Number,
  default: () => 1.0
},
/**
 * Snap to start|center|end
 */
snap: {
  type: String,
  default: () => 'start',
},

5. API methods.

// prev item
$refs.horizontal.prev();
// next item
$refs.horizontal.next();
// scroll to an item
$refs.horizontal.scrollToIndex(index);
// scroll to left
$refs.horizontal.scrollToLeft(index);
// refresh the scroller
$refs.horizontal.refresh();

6. Events.

onPrev() {
  this.prev += '- clicked prev'
},
onNext() {
  this.next += '- clicked next'
}
nScroll(data) {
  this.scroll = data
},
onScrollDebounce(data) {
  this.scrollDebounce = data
}

Preview:

Changelog:

v0.8.12 (10/17/2021)

• Maintenance

v0.8.11 (10/14/2021)

• fix: allow refresh callback to be optional

v0.8.9 (04/20/2021)

• Fix on scroll after unmount

v0.8.8 (02/04/2021)

• fix: hover not required for cursor pointer

v0.8.7 (01/27/2021)

• chore: refactor slots to use ref.children

v0.8.6 (01/23/2021)

• fix: v-hl-responsive last-child wrong parent class

v0.8.5 (01/12/2021)

• fix: removed margin for last child in container

v0.8.4 (01/07/2021)

• fix: prevent content from collapsing when empty

v0.8.3 (01/01/2021)

• Update

v0.8.2 (12/29/2020)

• chore: minor refactor

Download Details:

Author: fuxingloh

Live Demo: https://vue-horizontal.fuxing.dev/design/principles

Download Link: https://github.com/fuxingloh/vue-horizontal/archive/main.zip

Official Website: https://github.com/fuxingloh/vue-horizontal

Install & Download:

# Yarn
$ yarn add vue-horizontal

# NPM
$ npm i vue-horizontal