👋 vue-horizontal-list-autoscroll 🕶

A pure vue horizontal list implementation with minimal dependencies, ssr support, mobile friendly, touch friendly and responsive now with auto scroll

This project is built on top of vue-horizontal-list, huge shout out to Fuxing Loh for laying the groundwork, every other option and configuration available there is valid here also before version (1.0.7).

Demo

All Examples

Installation

npm i vue-horizontal-list-autoscroll
# or
yarn add vue-horizontal-list-autoscroll

Basic usage

<vue-horizontal-list-autoscroll-autoscroll :items="items" :options="{responsive: [{end: 576, size: 1}, {start: 576, end: 768, size: 2},{size: 3}], autoscroll:{ enabled: true, repeat: true }}">
  <template v-slot:default="{item}">
    <div class="item">
      <h5>{{item.title}}</h5>
      <p>{{item.content}}</p>
    </div>
  </template>
</vue-horizontal-list-autoscroll>

Features

• Lightweight implementation with 1 dependencies.
• SSR supported
• Mobile touch screen friendly
• Invisible scroll bar for consistent Windows and MacOS browsing experience.
• Autoscroll feature with return to start (repeat) feature
• Slideshow feature with return to start (repeat) feature
• Snap to the nearest item in the horizontal-list when scrolling.
• Windowed & Full-screen mode
  • The windowed mode will respect the container and not show overflowing item
  • Full-screen mode will show overflowing item, best result for small screen
• Dynamic responsive breakpoint configuration
• Navigation control will show up dynamically for larger screen
• Touch screen friendly
• Minimal config setup
• Custom prev & next icons support
• Tested on chrome, edge and safari
• Examples

Options

const options = {
  item: {
    // css class to inject into each individual item
    class: '',
    // padding between each item
    padding: 12 
  },
  autoscroll: {
    // auto scroll feature enabled or not
    enabled: true,
    // if enabled, the interval in milliseconds, by default 5000 milliseconds
    interval: 15000,
    // if enabled, the list will autoscroll to beginning of the list once it reaches the end i.e. all list items are scrolled
    repeat: true
  },
  slideshow: {
    // slide show feature enabled or not
    enabled: true,
    // if enabled, the interval in milliseconds, by default 5000 milliseconds
    interval: 15000,
    // if enabled, the list will autoscroll to beginning of the list once it reaches the end i.e. all list items are scrolled
    repeat: false
  },
  list: {
    // css class for the parent of item
    class: '', 
    // maximum width of the list it can extend to before switching to windowed mode, basically think of the bootstrap container max-width
    // windowed is used to toggle between full-screen mode and container mode
    windowed: 1200,
    // padding of the list, if container < windowed what is the left-right padding of the list
    // during full-screen mode the padding will added to left & right to centralise the item
    padding: 24
  },
  responsive: [
    // responsive breakpoints to calculate how many items to show in the list at each width interval
    // it will always fall back to these:
    {end: 576, size: 1},
    {start: 576, end: 768, size: 2},
    {start: 768, end: 992, size: 3},
    {start: 992, end: 1200, size: 4},
    {start: 1200, size: 5}
  ],
  navigation: {
    // when to show navigation
    start: 992,
    color: '#000'
  }
} 

Examples

Basic Responsive Usage

• Width between 0 - 576, show 1

• Width between 576 - 768, show 2

• Width catch all, show 3

Contributing

For any question or feature request please feel free to create an issue or pull request.