<template>
  <vue-scroll-snap>
    <div class="item"></div>
    <div class="item"></div>
    ...
  </vue-scroll-snap>
</template>

<script>
  import VueScrollSnap from "vue-scroll-snap";

  export default {
    components: {VueScrollSnap},
  };
</script>

<style>

  .item {
    /* Set the minimum height of the items to be the same as the height of the scroll-snap-container.*/
    min-height: 500px;
  }

  .scroll-snap-container {
    height: 500px;
    width: 500px;
  }
</style>

<template>
  <vue-scroll-snap :horizontal="true">
    ...
  </vue-scroll-snap>    
</template>

<script>...</script>

<style>

  .item {
    /* Set the minimum width of the items to be the same as the width of the scroll-snap-container.*/
    min-width: 500px;
  }

  .scroll-snap-container {...}
</style>

<template>
  <vue-scroll-snap :fullscreen="true">
    ...
  </vue-scroll-snap>
</template>

<script>...</script>
<style>/* No styling required. */</style>

<template>
  <vue-scroll-snap :fullscreen="true" :horizontal="true">
    ...
  </vue-scroll-snap>
</template>

<script>...</script>
<style>/* No styling required. */</style>