# Images

<template lang="html">
  <div class="con-example-images">
    <vs-images>
      <vs-image :key="index" :src="`https://picsum.photos/400/400?image=2${index}`" v-for="(image, index) in 9" />
      <vs-image :key="index" :src="`https://picsum.photos/400/400?image=1${index}`" v-for="(image, index) in 7" />
    </vs-images>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="stylus">
.con-example-images
  max-height 500px
  overflow auto
</style>

<template lang="html">
  <div class="con-example-images">
    <vs-select
    class="selectExample"
      label="Figuras"
      v-model="hover"
      >
      <vs-select-item :key="index" :modelValue="item.value" :text="item.text" v-for="(item,index) in hovers" />
    </vs-select>

    <vs-images :hover="hover">
      <vs-image :key="index" :src="`https://picsum.photos/400/400?image=3${index}`" v-for="(image, index) in 9" />
      <vs-image :key="index" :src="`https://picsum.photos/400/400?image=4${index}`" v-for="(image, index) in 7" />
    </vs-images>
  </div>
</template>

<script>
export default {
  data: () => ({
    hover: 'blur',
    hovers:[
      {text:'Default',value:'default'},
      {text:'Blur',value:'blur'},
      {text:'Zoom',value:'zoom'},
      {text:'Dark',value:'dark'},
      {text:'Scale',value:'scale'},
      {text:'Curtain',value:'curtain'},
    ],
  })
}
</script>

<style lang="stylus">
.con-example-images
  max-height 500px
  overflow auto
</style>

<template lang="html">
  <div class="con-example-images">
    <vs-images alternating not-border-radius not-margin >
      <vs-image :key="index" :src="`https://picsum.photos/400/400?image=3${index}`" v-for="(image, index) in 9" />
      <vs-image :key="index" :src="`https://picsum.photos/400/400?image=4${index}`" v-for="(image, index) in 7" />
    </vs-images>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="stylus">
.con-example-images
  max-height 500px
  overflow auto
</style>