Horizontal thumbnail slider with selected Image on Top



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

    0_1486991504457_upload-de9f9b58-7265-433a-b322-e68d6b7d442e

      <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>
    

  • Admin

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