<template>
  <div class="content">
    <hooper :settings="hooperSettings">
      <slide v-for="(image, key) in data" :key="key">
        <a style="cursor: default;" rel="group" :href="image" class="js-thumbnail"
          @click="handleProductShowClick('image-carousel' + key)">
          <img v-if="is_admin == false" :src="image" class="load-image visible-block" :data-src="image" :ref="'image-carousel' + key" :key="updateComponent">
          <img v-else-if="is_admin == true" :src="image" class="load-image visible-block" :data-src="image" :ref="'image-carousel' + key">
        </a>
      </slide>
      <navigation slot="hooper-addons">
      </navigation>
    </hooper>
  </div>
</template>


<style src="./styles.css"></style>
<script src="./scripts.js"></script> 
