<AsImage
    class="banner"
    :width="2800"
    :height="1400"
    :src="'//d3skwsdk169y0b.cloudfront.net/image/banner/3.jpg'"
    :progressive="true"
    :responsive="true"
  >
    <template #loading>
      <div class="placeholder" />
    </template>
  </AsImage>

    
  

    
      
  <AsImage
    :width="1080"
    :height="722"
    :src="'//d3skwsdk169y0b.cloudfront.net/image/fake3d/canyon.jpg'"
    :lazy="true"
    :progressive="true"
    imageLazyOffset="0px"
  >
    <template #loading>
      <div class="placeholder" />
    </template>
  </AsImage>

    
  

    
      
  <AsImage
    class="banner"
    :width="1080"
    :height="722"
    :src="'//d3skwsdk169y0b.cloudfront.net/image/fake3d/ball.jpg'"
  >
    <template #loading>
      <div class="placeholder" />
    </template>

    <template
      #webglfilter="{
        image
      }"
    >
      <AsFilterGlitch :image="image" />
    </template>
  </AsImage>

    
  

    
      
  <AsTransition
    ref="banner"
    :transition="{
      name: 'directionalwrap'
    }"
    @change="onChange"
  >
    <template
      #images="{
        toGroupWithIndex
      }"
    >
      <AsImage
        class="banner"
        :width="1080"
        :height="722"
        v-for="(src, i) in images"
        :key="i"
        :src="src"
        :to-group="toGroupWithIndex(i)"
      >
      </AsImage>
      
    </template>
  </AsTransition>