Horizontal Scroller Layout For Vue - vue-horizontal

Install & Download:

# Yarn
$ yarn add vue-horizontal
# NPM
$ npm i vue-horizontal

Description:

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
}