# Gallery

Gallery with one main and few side pictures that use can browse through.

# Most common usage scenario

<template>
  <SfGallery
    :images="images"
    :image-width="imageWidth"
    :image-height="imageHeight"
    :slider-options="sliderOptions"
    :current="current"
    :enable-zoom="enableZoom"
  />
</template>
<script>
import { SfGallery } from "@storefront-ui/vue";
export default {
  components: {
    SfGallery,
  },
  data() {
    return {
      current: 1,
      enableZoom: false,
      images: [
        {
          alt: "Product A",
          mobile: { url: "assets/storybook/SfGallery/productA.png" },
          desktop: { url: "assets/storybook/SfGallery/productA.png" },
          zoom: { url: "assets/storybook/SfGallery/productA.png" },
        },
        {
          alt: "Product B",
          mobile: { url: "/assets/storybook/SfGallery/productB.jpg" },
          desktop: { url: "/assets/storybook/SfGallery/productB.jpg" },
          zoom: { url: "/assets/storybook/SfGallery/productB.jpg" },
        },
        {
          alt: "Product A",
          mobile: { url: "assets/storybook/SfGallery/productA.png" },
          desktop: { url: "assets/storybook/SfGallery/productA.png" },
          zoom: { url: "assets/storybook/SfGallery/productA.png" },
        },
        {
          alt: "Product B",
          mobile: { url: "/assets/storybook/SfGallery/productB.jpg" },
          desktop: { url: "/assets/storybook/SfGallery/productB.jpg" },
          zoom: { url: "/assets/storybook/SfGallery/productB.jpg" },
        },
      ],
      imageWidth: 422,
      imageHeight: 664,
      sliderOptions: { autoplay: false, rewind: true, gap: 0 },
    };
  },
};
</script>

# Props

  • images

    • Images list
    • type: array
    • defaultValue: () => []
  • imageWidth

    • Images width, without unit
    • type: number|string
    • defaultValue: 422
  • imageHeight

    • Images height, without unit
    • type: number|string
    • defaultValue: 664
  • thumbWidth

    • Thumb width, without unit
    • type: number|string
    • defaultValue: 160
  • thumbHeight

    • Thumb height, without unit
    • type: number|string
    • defaultValue: 160
  • current

    • Initial image number (starting from 1)
    • type: number
    • defaultValue: 1
  • sliderOptions

    • Glide slider options (https://glidejs.com/docs/options/)
    • type: object
    • defaultValue: function(){ return { type: "slider", autoplay: false, rewind: false, gap: 0, }; }
  • outsideZoom

    • Image zoom inside or overlap the stage
    • type: boolean
    • defaultValue: false
  • enableZoom

    • Toogle for image zoom or overlap the stage
    • type: boolean
    • defaultValue: false

# Slots

  • thumbs
    • bindings: images, active, go

# Events

  • click
    • Event for current image change (v-model)

# CSS modifiers

  • .sf-gallery__item--selected

# CSS custom properties (variables)

  • --gallery-flex-direction
  • --gallery-thumbs-display
  • --gallery-thumbs-flex
  • --gallery-thumbs-flex-direction
  • --gallery-thumbs-margin
  • --gallery-thumbs-order
  • --gallery-thumb-width
  • --gallery-item-margin
  • --gallery-item-opacity
  • --gallery-item-transition
  • --gallery-item-cursor
  • --gallery-thumb-height
  • --gallery-stage-width

# Overridden other components CSS variables

None.

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.