Horizontal thumbnail slider with selected Image on Top

[Martin]

Basic example. Copy Paste code into an empty Example.vue file

  <q-layout>
    <!--BODY-->
    <div class="layout-view">
      <!--IMAGE-->
      <div>
        <img :src="itemSelected.url" width="100%">
      </div>
      <!--HORIZONTAL LIST-->
      <div>
        <div class="scrollmenu">
          <div v-for="item in list"
               class="thumbnail"
               @click="itemSelected = item">
            <img :src="item.url" width="150px">
          </div>
        </div>
      </div>
    </div>
  </q-layout>
</template>

<script>
  export default {
    data () {
      return {
        list         : [],
        itemSelected : {}
      }
    },
    mounted() {
      for (let i = 1; i <= 20; i++) {
        this.list.push(
          {
            name : 'item ' + i,
            url  : 'http://placehold.it/350x150?text=PLACEHOLDER' + i
          }
        )
      }
      this.itemSelected = this.list[0]
    }
  }
</script>

<style>
  div.scrollmenu {
    overflow    : auto;
    white-space : nowrap;
  }

  div.scrollmenu .thumbnail {
    display : inline-block;
    margin  : 5px;
  }
</style>

[rstoenescu]

Quick tip. It’s best to move mounted() initialization code directly in data() to avoid rerender on startup.