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.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.