diff --git a/src/components/galleria/Galleria.d.ts b/src/components/galleria/Galleria.d.ts
new file mode 100644
index 000000000..97ce765af
--- /dev/null
+++ b/src/components/galleria/Galleria.d.ts
@@ -0,0 +1,36 @@
+import Vue, {VNode} from 'vue';
+
+export declare class Galleria extends Vue {
+    id?: string;
+    value?: any;
+    activeItemIndex?: number;
+    fullScreen?: boolean;
+    visible?: boolean;
+    numVisible?: number;
+    responsiveOptions?: any[];
+    showPreviewNavButtons?: boolean;
+    showThumbnailNavButtons?: boolean;
+    showNavButtonsOnPreviewHover?: boolean;
+    changePreviewOnIndicatorHover?: boolean;
+    circular?: boolean;
+    autoPlay?: boolean;
+    transitionInterval?: number;
+    showThumbnails?: boolean;
+    thumbnailsPosition?: string;
+    verticalThumbnailViewPortHeight?: string;
+    showIndicators?: boolean;
+    showIndicatorsOnPreview?: boolean;
+    indicatorsPosition?: string;
+    baseZIndex?: number;
+    maskClass?: string;
+    galleriaStyle?: string;
+    galleriaClass?: string;
+	$slots: {
+		header: VNode[];
+        footer: VNode[];
+        previewItem: VNode[];
+        previewCaption: VNode[];
+        indicator: VNode[];
+        thumbnailItem: VNode[];
+	}
+}
diff --git a/src/components/galleria/Galleria.vue b/src/components/galleria/Galleria.vue
new file mode 100644
index 000000000..89e6b78fc
--- /dev/null
+++ b/src/components/galleria/Galleria.vue
@@ -0,0 +1,425 @@
+<template>
+    <div v-if="fullScreen && visible" ref="mask" :class="maskContentClass">
+        <GalleriaContent v-bind="$props" @maskHide="maskHide" :templates="$scopedSlots" @activeItemChange="onActiveItemChange" />
+    </div>
+
+    <GalleriaContent v-else-if="!fullScreen" v-bind="$props" :templates="$scopedSlots" @activeItemChange="onActiveItemChange" />
+</template>
+
+<script>
+import GalleriaContent from './GalleriaContent';
+import DomHandler from '../utils/DomHandler';
+
+export default {
+    inheritAttrs: false,
+    props: {
+        id: {
+            type: String,
+            default: null
+        },
+		value: {
+            type: Array,
+            default: null
+        },
+        activeItemIndex: {
+            type: Number,
+            default: 0
+        },
+        fullScreen: {
+            type: Boolean,
+            default: false
+        },
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        numVisible: {
+			type: Number,
+			default: 3
+		},
+        responsiveOptions: {
+            type: Array,
+            default: null
+        },
+        showPreviewNavButtons: {
+            type: Boolean,
+            default: false
+        },
+        showThumbnailNavButtons: {
+            type: Boolean,
+            default: true
+        },
+        showNavButtonsOnPreviewHover: {
+            type: Boolean,
+            default: false
+        },
+        changePreviewOnIndicatorHover: {
+            type: Boolean,
+            default: false
+        },
+        circular: {
+            type: Boolean,
+            default: false
+        },
+        autoPlay: {
+            type: Boolean,
+            default: false
+        },
+        transitionInterval: {
+			type: Number,
+			default: 4000
+		},
+        showThumbnails: {
+            type: Boolean,
+            default: true
+        },
+        thumbnailsPosition: {
+			type: String,
+			default: "bottom"
+		},
+        verticalThumbnailViewPortHeight: {
+			type: String,
+			default: "300px"
+		},
+        showIndicators: {
+            type: Boolean,
+            default: false
+        },
+        showIndicatorsOnPreview: {
+            type: Boolean,
+            default: false
+        },
+        indicatorsPosition: {
+			type: String,
+			default: "bottom"
+		},
+        baseZIndex: {
+			type: Number,
+			default: 0
+        },
+        maskClass: {
+            type: String,
+            default: null
+        },
+        galleriaStyle: {
+            type: String,
+            default: null
+        },
+        galleriaClass: {
+            type: String,
+            default: null
+        }
+    },
+    updated() {
+        this.removeStylesFromMask();
+
+        if (this.fullScreen) {
+            if (this.visible) {
+                DomHandler.addClass(document.body, 'p-overflow-hidden');
+
+                if (this.$refs.mask) {
+                    this.$refs.mask.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
+                }
+            }
+            else {
+                DomHandler.removeClass(document.body, 'p-overflow-hidden');
+            }
+        }
+    },
+    mounted() {
+        this.removeStylesFromMask();
+    },
+    beforeDestroy() {
+        if (this.fullScreen) {
+            DomHandler.removeClass(document.body, 'p-overflow-hidden');
+        }
+    },
+    methods: {
+        onActiveItemChange(index) {
+            if (this.activeItemIndex !== index) {
+                this.$emit('update:activeItemIndex', index);
+            }
+        },
+        maskHide() {
+            this.$emit('update:visible', false);
+        },
+        removeStylesFromMask() {
+            if (this.$refs.mask) {
+                this.galleriaStyles = this.$vnode.data.style || this.$vnode.data.staticStyle;
+                if (this.galleriaStyles) {
+                    Object.keys(this.galleriaStyles).forEach((key) => {
+                        this.$refs.mask.style[key] = '';
+                    });
+                }
+
+                this.galleriaClasses = this.$vnode.data.class || this.$vnode.data.staticClass;
+                if (this.galleriaClasses) {
+                    this.$refs.mask.classList = 'p-galleria-mask p-component-overlay' + (this.visible && ' p-galleria-visible');
+                }
+            }
+        }
+    },
+    computed: {
+        maskContentClass() {
+            return ['p-galleria-mask p-component-overlay', {
+                'p-galleria-visible': this.visible
+            }, this.maskClass];
+        }
+    },
+    components: {
+        'GalleriaContent': GalleriaContent
+    }
+}
+</script>
+
+<style>
+.p-galleria-content {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Preview */
+.p-galleria-preview-content {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+.p-galleria-preview-container {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+.p-galleria-preview-container .p-galleria-preview-nav-button {
+    height: 3em;
+    position: absolute;
+    top: 50%;
+    margin-top: -1.5em;
+    z-index: 1;
+}
+.p-galleria-preview-prev {
+    left: .5em;
+}
+.p-galleria-preview-next {
+    right: .5em;
+}
+.p-galleria-preview-prev span,
+.p-galleria-preview-next span {
+    font-size: 2em;
+}
+.p-galleria-preview-items-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+}
+.p-galleria-preview-nav-onhover .p-galleria-preview-content .p-galleria-preview-nav-button {
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity .2s ease-in-out;
+}
+.p-galleria-preview-nav-onhover .p-galleria-preview-content:hover .p-galleria-preview-nav-button {
+    pointer-events: all;
+    opacity: 1;
+}
+.p-galleria-preview-nav-onhover .p-galleria-preview-content:hover .p-galleria-preview-nav-button.p-disabled {
+    pointer-events: none;
+    opacity: .5;
+}
+.p-galleria-preview-caption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding: 1em;
+    width: 100%;
+}
+.p-galleria .p-galleria-indicator-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: .2em;
+}
+
+/* Thumbnails */
+.p-galleria-thumbnail-content {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    overflow: auto;
+    flex-shrink: 0;
+}
+.p-galleria-thumbnail-prev,
+.p-galleria-thumbnail-next {
+    align-self: center;
+    text-align: center;
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: 2.5em;
+    height: 2.5em;
+}
+.p-galleria-thumbnail-prev span,
+.p-galleria-thumbnail-next span {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.p-galleria-thumbnail-container {
+    display: flex;
+    flex-direction: row;
+    padding: 0 .1em;
+}
+.p-galleria-thumbnail-items-content {
+    overflow: hidden;
+    width: 100%;
+}
+.p-galleria-thumbnail-items-container {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+}
+.p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
+    width: 100%;
+    box-sizing: border-box;
+    overflow: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.p-galleria-thumbnail-item .p-galleria-thumbnail-item-content {
+    margin: .3em;
+    cursor: pointer;
+}
+
+/* Indicators */
+.p-galleria-indicator-onpreview .p-galleria-indicator-container {
+    position: absolute;
+    z-index: 1;
+}
+.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-indicator-container {
+    top: 1em;
+    left: 0;
+    width: 100%;
+}
+.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-indicator-container {
+    right: 1em;
+    top: 0;
+    height: 100%;
+}
+.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-indicator-container {
+    bottom: 1em;
+    left: 0;
+    width: 100%;
+}
+.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-indicator-container {
+    left: 1em;
+    top: 0;
+    height: 100%;
+}
+.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-preview-caption,
+.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-preview-caption {
+    width: calc(100% - 4em);
+}
+.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-preview-caption,
+.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-preview-next {
+    right: 4em;
+}
+.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-preview-caption,
+.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-preview-prev {
+    left: 4em;
+}
+
+/* Positions */
+/* Thumbnails */
+.p-galleria-thumbnails-left .p-galleria-content,
+.p-galleria-thumbnails-right .p-galleria-content {
+    flex-direction: row;
+    align-items: center;
+}
+.p-galleria-thumbnails-left .p-galleria-content .p-galleria-preview-content,
+.p-galleria-thumbnails-right .p-galleria-content .p-galleria-preview-content {
+    flex-direction: row;
+}
+.p-galleria-thumbnails-left .p-galleria-content .p-galleria-preview-content,
+.p-galleria-thumbnails-top .p-galleria-content .p-galleria-preview-content {
+    order: 2;
+}
+.p-galleria-thumbnails-left .p-galleria-content .p-galleria-thumbnail-content,
+.p-galleria-thumbnails-top .p-galleria-content .p-galleria-thumbnail-content {
+    order: 1;
+}
+.p-galleria-thumbnails-left .p-galleria-content .p-galleria-thumbnail-container,
+.p-galleria-thumbnails-right .p-galleria-content .p-galleria-thumbnail-container {
+    flex-direction: column;
+}
+.p-galleria-thumbnails-left .p-galleria-content .p-galleria-thumbnail-items-container,
+.p-galleria-thumbnails-right .p-galleria-content .p-galleria-thumbnail-items-container {
+    flex-direction: column;
+    height: 100%;
+}
+/* Indicators */
+.p-galleria-indicators-left .p-galleria-preview-content,
+.p-galleria-indicators-right .p-galleria-preview-content {
+    flex-direction: row;
+    align-items: center;
+}
+.p-galleria-indicators-left .p-galleria-preview-content .p-galleria-preview-container,
+.p-galleria-indicators-top .p-galleria-preview-content .p-galleria-preview-container {
+    order: 2;
+}
+.p-galleria-indicators-left .p-galleria-preview-content .p-galleria-indicator-container,
+.p-galleria-indicators-top .p-galleria-preview-content .p-galleria-indicator-container {
+    order: 1;
+}
+.p-galleria-indicators-left .p-galleria-preview-content .p-galleria-indicator-container,
+.p-galleria-indicators-right .p-galleria-preview-content .p-galleria-indicator-container {
+    flex-direction: column;
+}
+
+/* FullScreen */
+.p-galleria-mask {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+}
+.p-galleria-mask .p-galleria {
+    max-height: 90%;
+    max-width: calc(90% - 8em);
+}
+.p-galleria-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: .5em;
+}
+.p-galleria-close span {
+    font-size: 3em;
+}
+.p-galleria-mask .p-galleria .p-galleria-preview-nav-button {
+    position: fixed;
+    top: 50%;
+    height: 20em;
+    width: 4em;
+    margin-top: -10em;
+}
+.p-galleria-mask .p-galleria .p-galleria-preview-prev {
+    left: 0;
+}
+.p-galleria-mask .p-galleria .p-galleria-preview-next {
+    right: 0;
+}
+
+/* Keyboard Support */
+.p-items-hidden .p-galleria-thumbnail-item {
+    visibility: hidden;
+}
+
+.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
+    visibility: visible;
+}
+</style>
diff --git a/src/components/galleria/GalleriaContent.vue b/src/components/galleria/GalleriaContent.vue
new file mode 100644
index 000000000..b9e008149
--- /dev/null
+++ b/src/components/galleria/GalleriaContent.vue
@@ -0,0 +1,102 @@
+<template>
+    <div :id="id" v-if="$attrs.value && $attrs.value.length > 0" :class="galleriaClass" :style="$attrs.galleriaStyle">
+        <button v-if="$attrs.fullScreen" type="button" class="p-galleria-close p-link" @click="$emit('maskHide')">
+            <span class="p-galleria-close-icon pi pi-times"></span>
+        </button>
+        <div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header">
+            <GalleriaItemSlot type="header" :templates="$attrs.templates"/>
+        </div>
+        <div class="p-galleria-content">
+            <GalleriaPreview :value="$attrs.value" :activeItemIndex.sync="activeItemIndex" :circular="$attrs.circular" :templates="$attrs.templates"
+                :showIndicators="$attrs.showIndicators" :changePreviewOnIndicatorHover="$attrs.changePreviewOnIndicatorHover"
+                :showPreviewNavButtons="$attrs.showPreviewNavButtons" :autoPlay="$attrs.autoPlay" :slideShowActive.sync="slideShowActive"
+                @startSlideShow="startSlideShow" @stopSlideShow="stopSlideShow" />
+
+            <GalleriaThumbnails v-if="$attrs.showThumbnails" :containerId="id" :value="$attrs.value" :activeItemIndex.sync="activeItemIndex" :templates="$attrs.templates"
+                :numVisible="$attrs.numVisible" :responsiveOptions="$attrs.responsiveOptions" :circular="$attrs.circular"
+                :isVertical="isVertical()" :contentHeight="$attrs.verticalThumbnailViewPortHeight" :showThumbnailNavButtons="$attrs.showThumbnailNavButtons"
+                :slideShowActive.sync="slideShowActive" @stopSlideShow="stopSlideShow" />
+        </div>
+        <div v-if="$attrs.templates && $attrs.templates['footer']" class="p-galleria-footer">
+            <GalleriaItemSlot type="footer" :templates="$attrs.templates"/>
+        </div>
+    </div>
+</template>
+
+<script>
+import UniqueComponentId from '../utils/UniqueComponentId';
+import GalleriaPreview from './GalleriaPreview';
+import GalleriaThumbnails from './GalleriaThumbnails';
+import GalleriaItemSlot from './GalleriaItemSlot';
+
+export default {
+    inheritAttrs: false,
+    interval: null,
+    data() {
+        return {
+            id: this.$attrs.id || UniqueComponentId(),
+            activeItemIndex: this.$attrs.activeItemIndex,
+            slideShowActive: false
+        }
+    },
+    watch: {
+        '$attrs.activeItemIndex': function(newVal) {
+            this.activeItemIndex = newVal;
+        }
+    },
+    updated() {
+        this.$emit('activeItemChange', this.activeItemIndex);
+    },
+    beforeDestroy() {
+		if (this.slideShowActive) {
+			this.stopSlideShow();
+		}
+	},
+    methods: {
+        isAutoPlayActive() {
+            return this.slideShowActive;
+        },
+        startSlideShow() {
+            this.interval = setInterval(() => {
+                let activeIndex = (this.$attrs.circular && (this.$attrs.value.length - 1) === this.activeItemIndex) ? 0 : (this.activeItemIndex + 1);
+                this.activeItemIndex = activeIndex;
+            }, this.$attrs.transitionInterval);
+
+            this.slideShowActive = true;
+        },
+        stopSlideShow() {
+            if (this.interval) {
+                clearInterval(this.interval);
+            }
+
+            this.slideShowActive = false;
+        },
+        getPositionClass(preClassName, position) {
+            const positions = ['top', 'left', 'bottom', 'right'];
+            const pos = positions.find(item => item === position);
+
+            return pos ? `${preClassName}-${pos}` : '';
+        },
+        isVertical() {
+            return this.$attrs.thumbnailsPosition === 'left' || this.$attrs.thumbnailsPosition === 'right';
+        }
+    },
+    computed: {
+        galleriaClass() {
+            const thumbnailsPosClass = this.$attrs.showThumbnails && this.getPositionClass('p-galleria-thumbnails', this.$attrs.thumbnailsPosition);
+            const indicatorPosClass = this.$attrs.showIndicators && this.getPositionClass('p-galleria-indicators', this.$attrs.indicatorsPosition);
+
+            return ['p-galleria p-component', {
+                'p-galleria-fullscreen': this.$attrs.fullScreen,
+                'p-galleria-indicator-onpreview': this.$attrs.showIndicatorsOnPreview,
+                'p-galleria-preview-nav-onhover': this.$attrs.showNavButtonsOnPreviewHover && !this.$attrs.fullScreen
+            }, thumbnailsPosClass, indicatorPosClass, this.$attrs.galleriaClass]
+        }
+    },
+    components: {
+        'GalleriaPreview': GalleriaPreview,
+        'GalleriaThumbnails': GalleriaThumbnails,
+        'GalleriaItemSlot': GalleriaItemSlot
+    }
+}
+</script>
diff --git a/src/components/galleria/GalleriaItemSlot.vue b/src/components/galleria/GalleriaItemSlot.vue
new file mode 100644
index 000000000..bef169623
--- /dev/null
+++ b/src/components/galleria/GalleriaItemSlot.vue
@@ -0,0 +1,52 @@
+<script>
+export default {
+    functional: true,
+    props: {
+        item: {
+            type: null,
+            default: null
+        },
+        index: {
+            type: Number,
+            default: 0
+        },
+        templates: {
+            type: null,
+            default: null
+        },
+        type: {
+            type: String,
+            default: null
+        }
+    },
+    render(createElement, context) {
+        const { item, index, templates, type } = context.props;
+        const template = templates && templates[type];
+
+        if (template) {
+            let content;
+            switch(type) {
+                case 'previewItem':
+                case 'previewCaption':
+                case 'thumbnailItem':
+                    content = template({
+                        item
+                    });
+                    break;
+                case 'indicator':
+                    content = template({
+                        index
+                    });
+                    break;
+                default:
+                    content = template({});
+                    break;
+            }
+
+            return content ? [content] : null;
+        }
+
+        return null;
+    }
+}
+</script>
diff --git a/src/components/galleria/GalleriaPreview.vue b/src/components/galleria/GalleriaPreview.vue
new file mode 100644
index 000000000..f39fcae11
--- /dev/null
+++ b/src/components/galleria/GalleriaPreview.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="p-galleria-preview-content">
+    <div class="p-galleria-preview-container">
+        <button v-if="showPreviewNavButtons" type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()">
+            <span class="p-galleria-preview-prev-icon pi pi-chevron-left"></span>
+        </button>
+        <div class="p-galleria-preview-items-content">
+            <GalleriaItemSlot type="previewItem" :item="activeItem" :templates="templates" />
+        </div>
+        <button v-if="showPreviewNavButtons" type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()">
+            <span class="p-galleria-preview-next-icon pi pi-chevron-right"></span>
+        </button>
+        <div class="p-galleria-preview-caption">
+            <GalleriaItemSlot type="previewCaption" :item="activeItem" :templates="templates" />
+        </div>
+    </div>
+    <ul v-if="showIndicators" class="p-galleria-indicator-container p-reset">
+        <li v-for="(item, index) of value" :key="`p-galleria-indicator-${index}`" tabindex="0"
+            @click="onIndicatorClick(index)" @mouseenter="onIndicatorMouseEnter(index)" @keydown.enter="onIndicatorKeyDown(index)"
+            :class="['p-galleria-indicator-item', {'p-highlight': isIndicatorItemActive(index)}]">
+            <button type="button" tabIndex="-1" class="p-link" v-if="!templates['indicator']">
+                <span :class="['p-galleria-indicator-icon pi', {
+                    'pi-circle-on': isIndicatorItemActive(index),
+                    'pi-circle-off': !isIndicatorItemActive(index)}]" />
+            </button>
+            <GalleriaItemSlot type="indicator" :index="index" :templates="templates" />
+        </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import GalleriaItemSlot from './GalleriaItemSlot';
+
+export default {
+    props: {
+        circular: {
+            type: Boolean,
+            default: false
+        },
+        activeItemIndex: {
+            type: Number,
+            default: 0
+        },
+        value: {
+            type: Array,
+            default: null
+        },
+        showPreviewNavButtons: {
+            type: Boolean,
+            default: true
+        },
+        showIndicators: {
+            type: Boolean,
+            default: true
+        },
+        slideShowActive: {
+            type: Boolean,
+            default: true
+        },
+        changePreviewOnIndicatorHover: {
+            type: Boolean,
+            default: true
+        },
+        autoPlay: {
+            type: Boolean,
+            default: false
+        },
+        templates: {
+            type: null,
+            default: null
+        }
+    },
+    mounted() {
+        if (this.autoPlay) {
+            this.$emit('startSlideShow');
+        }
+    },
+    methods: {
+        next() {
+            let nextItemIndex = this.activeItemIndex + 1;
+            let activeIndex = this.circular && this.value.length - 1 === this.activeItemIndex
+                        ? 0
+                        : nextItemIndex;
+
+            this.$emit('update:activeItemIndex', activeIndex);
+        },
+        prev() {
+            let prevItemIndex = this.activeItemIndex !== 0 ? this.activeItemIndex - 1 : 0;
+            let activeIndex = this.circular && this.activeItemIndex === 0
+                    ? this.value.length - 1
+                    : prevItemIndex
+
+            this.$emit('update:activeItemIndex', activeIndex);
+        },
+        stopSlideShow() {
+            if (this.slideShowActive && this.stopSlideShow) {
+                this.$emit('stopSlideShow');
+            }
+        },
+        navBackward(e) {
+            this.stopSlideShow();
+            this.prev();
+
+            if (e && e.cancelable) {
+                e.preventDefault();
+            }
+        },
+        navForward(e) {
+            this.stopSlideShow();
+            this.next();
+
+            if (e && e.cancelable) {
+                e.preventDefault();
+            }
+        },
+        onIndicatorClick(index) {
+            this.stopSlideShow();
+            this.$emit('update:activeItemIndex', index);
+        },
+        onIndicatorMouseEnter(index) {
+            if (this.changePreviewOnIndicatorHover) {
+                this.stopSlideShow();
+
+                this.$emit('update:activeItemIndex', index);
+            }
+        },
+        onIndicatorKeyDown(index) {
+            this.stopSlideShow();
+
+            this.$emit('update:activeItemIndex', index);
+        },
+        isIndicatorItemActive(index) {
+            return this.activeItemIndex === index;
+        },
+        isNavBackwardDisabled() {
+            return !this.circular && this.activeItemIndex === 0;
+        },
+        isNavForwardDisabled() {
+            return !this.circular && this.activeItemIndex === (this.value.length - 1);
+        }
+    },
+    computed: {
+        activeItem() {
+            return this.value[this.activeItemIndex];
+        },
+        navBackwardClass() {
+            return ['p-galleria-preview-prev p-galleria-preview-nav-button p-button', {
+                'p-disabled': this.isNavBackwardDisabled()
+            }];
+        },
+        navForwardClass() {
+            return ['p-galleria-preview-next p-galleria-preview-nav-button p-button', {
+                'p-disabled': this.isNavForwardDisabled()
+            }];
+        }
+    },
+    components: {
+        'GalleriaItemSlot': GalleriaItemSlot
+    }
+};
+</script>
diff --git a/src/components/galleria/GalleriaThumbnails.vue b/src/components/galleria/GalleriaThumbnails.vue
new file mode 100644
index 000000000..deca60ee7
--- /dev/null
+++ b/src/components/galleria/GalleriaThumbnails.vue
@@ -0,0 +1,411 @@
+<template>
+    <div class="p-galleria-thumbnail-content">
+        <div class="p-galleria-thumbnail-container">
+            <button v-if="showThumbnailNavButtons" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()">
+                <span :class="navBackwardIconClass"></span>
+            </button>
+            <div class="p-galleria-thumbnail-items-content" :style="{'height': isVertical ? contentHeight : ''}">
+                <div ref="itemsContainer" class="p-galleria-thumbnail-items-container" @transitionend="onTransitionEnd"
+                    @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)">
+                    <div v-for="(item, index) of value" :key="`p-galleria-thumbnail-item-${index}`" :class="['p-galleria-thumbnail-item', {
+                        'p-galleria-thumbnail-item-current': activeItemIndex === index,
+                        'p-galleria-thumbnail-item-active': isItemActive(index),
+                        'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
+                        'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index }]">
+                        <div class="p-galleria-thumbnail-item-content" :tabindex="isItemActive(index) ? 0 : null" @click="onItemClick(index)" @keydown.enter="onItemClick(index)">
+                            <GalleriaItemSlot type="thumbnailItem" :item="item" :templates="templates" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <button v-if="showThumbnailNavButtons" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()">
+                <span :class="navForwardIconClass"></span>
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+import GalleriaItemSlot from './GalleriaItemSlot';
+import DomHandler from '../utils/DomHandler';
+
+export default {
+    props: {
+        containerId: {
+            type: String,
+            default: null,
+        },
+        value: {
+            type: Array,
+            default: null
+        },
+        numVisible: {
+            type: Number,
+            default: 3
+        },
+        activeItemIndex: {
+            type: Number,
+            default: 0
+        },
+        isVertical: {
+            type: Boolean,
+            default: false
+        },
+        slideShowActive: {
+            type: Boolean,
+            default: false
+        },
+        circular: {
+            type: Boolean,
+            default: false
+        },
+        responsiveOptions: {
+            type: Array,
+            default: null
+        },
+        contentHeight: {
+            type: String,
+            default: "300px"
+        },
+        showThumbnailNavButtons: {
+            type: Boolean,
+            default: true
+        },
+        templates: {
+            type: null,
+            default: null
+        }
+    },
+    startPos: null,
+    thumbnailsStyle: null,
+    sortedResponsiveOptions: null,
+    data() {
+        return {
+            d_numVisible: this.numVisible,
+            d_oldNumVisible: this.numVisible,
+            d_activeItemIndex: this.activeItemIndex,
+            d_oldActiveItemIndex: this.activeItemIndex,
+            totalShiftedItems: 0,
+            page: 0
+        }
+    },
+    watch: {
+        numVisible(newValue, oldValue) {
+			this.d_numVisible = newValue;
+			this.d_oldNumVisible = oldValue;
+        },
+        activeItemIndex(newValue, oldValue) {
+			this.d_activeItemIndex = newValue;
+			this.d_oldActiveItemIndex = oldValue;
+        }
+    },
+    mounted() {
+		this.createStyle();
+		this.calculatePosition();
+
+		if (this.responsiveOptions) {
+			this.bindDocumentListeners();
+		}
+    },
+    updated() {
+        let totalShiftedItems = this.totalShiftedItems;
+
+        if (this.d_oldNumVisible !== this.d_numVisible || this.d_oldActiveItemIndex !== this.d_activeItemIndex) {
+            if (this.d_activeItemIndex <= this.getMedianItemIndex()) {
+                totalShiftedItems = 0;
+            }
+            else if (this.value.length - this.d_numVisible + this.getMedianItemIndex() < this.d_activeItemIndex) {
+                totalShiftedItems = this.d_numVisible - this.value.length;
+            }
+            else if (this.value.length - this.d_numVisible < this.d_activeItemIndex && this.d_numVisible % 2 === 0) {
+                totalShiftedItems = (this.d_activeItemIndex * -1) + this.getMedianItemIndex() + 1;
+            }
+            else {
+                totalShiftedItems = (this.d_activeItemIndex * -1) + this.getMedianItemIndex();
+            }
+
+            if (totalShiftedItems !== this.totalShiftedItems) {
+                this.totalShiftedItems = totalShiftedItems;
+            }
+
+            this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100/ this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.d_numVisible)}%, 0, 0)`;
+
+            if (this.d_oldActiveItemIndex !== this.d_activeItemIndex) {
+                DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden');
+                this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
+            }
+
+            this.d_oldActiveItemIndex = this.d_activeItemIndex;
+            this.d_oldNumVisible = this.d_numVisible;
+        }
+    },
+    beforeDestroy() {
+		if (this.responsiveOptions) {
+			this.unbindDocumentListeners();
+        }
+
+        if (this.thumbnailsStyle) {
+            this.thumbnailsStyle.parentNode.removeChild(this.thumbnailsStyle);
+        }
+	},
+    methods: {
+        step(dir) {
+            let totalShiftedItems = this.totalShiftedItems + dir;
+
+            if (dir < 0 && (-1 * totalShiftedItems) + this.d_numVisible > (this.value.length - 1)) {
+                totalShiftedItems = this.d_numVisible - this.value.length;
+            }
+            else if (dir > 0 && totalShiftedItems > 0) {
+                totalShiftedItems = 0;
+            }
+
+            if (this.circular) {
+                if (dir < 0 && this.value.length - 1 === this.d_activeItemIndex) {
+                    totalShiftedItems = 0;
+                }
+                else if (dir > 0 && this.d_activeItemIndex === 0) {
+                    totalShiftedItems = this.d_numVisible - this.value.length;
+                }
+            }
+
+            if (this.$refs.itemsContainer) {
+                DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden');
+                this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100/ this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.d_numVisible)}%, 0, 0)`;
+                this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
+            }
+
+            this.totalShiftedItems = totalShiftedItems;
+        },
+        stopSlideShow() {
+            if (this.slideShowActive && this.stopSlideShow) {
+                this.$emit('stopSlideShow');
+            }
+        },
+        getMedianItemIndex() {
+            let index = Math.floor(this.d_numVisible / 2);
+
+            return (this.d_numVisible % 2) ? index : index - 1;
+        },
+        navBackward(e) {
+            this.stopSlideShow();
+
+            let prevItemIndex = this.d_activeItemIndex !== 0 ? this.d_activeItemIndex - 1 : 0;
+            let diff = prevItemIndex + this.totalShiftedItems;
+            if ((this.d_numVisible - diff - 1) > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) !== 0 || this.circular)) {
+                this.step(1);
+            }
+
+            let activeIndex = this.circular && this.d_activeItemIndex === 0 ? this.value.length - 1 : prevItemIndex;
+            this.$emit('update:activeItemIndex', activeIndex);
+
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+        },
+        navForward(e) {
+            this.stopSlideShow();
+
+            let nextItemIndex = this.d_activeItemIndex + 1;
+            if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) < this.getTotalPageNumber() - 1 || this.circular)) {
+                this.step(-1);
+            }
+
+            let activeIndex = this.circular && (this.value.length - 1) === this.d_activeItemIndex ? 0 : nextItemIndex;
+            this.$emit('update:activeItemIndex', activeIndex);
+
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+        },
+        onItemClick(index) {
+            this.stopSlideShow();
+
+            let selectedItemIndex = index;
+            if (selectedItemIndex !== this.d_activeItemIndex) {
+                const diff = selectedItemIndex + this.totalShiftedItems;
+                let dir = 0;
+                if (selectedItemIndex < this.d_activeItemIndex) {
+                    dir = (this.d_numVisible - diff - 1) - this.getMedianItemIndex();
+                    if (dir > 0 && (-1 * this.totalShiftedItems) !== 0) {
+                        this.step(dir);
+                    }
+                }
+                else {
+                    dir = this.getMedianItemIndex() - diff;
+                    if (dir < 0 && (-1 * this.totalShiftedItems) < this.getTotalPageNumber() - 1) {
+                        this.step(dir);
+                    }
+                }
+
+                this.$emit('update:activeItemIndex', selectedItemIndex);
+            }
+        },
+        onTransitionEnd() {
+            if (this.$refs.itemsContainer) {
+                DomHandler.addClass(this.$refs.itemsContainer, 'p-items-hidden');
+                this.$refs.itemsContainer.style.transition = '';
+            }
+        },
+        onTouchStart(e) {
+            let touchobj = e.changedTouches[0];
+
+            this.startPos = {
+                x: touchobj.pageX,
+                y: touchobj.pageY
+            };
+        },
+        onTouchMove(e) {
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+        },
+        onTouchEnd(e) {
+            let touchobj = e.changedTouches[0];
+
+            if (this.isVertical) {
+                this.changePageOnTouch(e, (touchobj.pageY - this.startPos.y));
+            }
+            else {
+                this.changePageOnTouch(e, (touchobj.pageX - this.startPos.x));
+            }
+        },
+        changePageOnTouch(e, diff) {
+            if (diff < 0) {           // left
+                this.navForward(e);
+            }
+            else {                    // right
+                this.navBackward(e);
+            }
+        },
+        getTotalPageNumber() {
+            return this.value.length > this.d_numVisible ? (this.value.length - this.d_numVisible) + 1 : 0;
+        },
+        createStyle() {
+            if (!this.thumbnailsStyle) {
+                this.thumbnailsStyle = document.createElement('style');
+                this.thumbnailsStyle.type = 'text/css';
+                document.body.appendChild(this.thumbnailsStyle);
+            }
+
+            let innerHTML = `
+                #${this.containerId} .p-galleria-thumbnail-item {
+                    flex: 1 0 ${ (100/ this.d_numVisible) }%
+                }
+            `;
+
+            if (this.responsiveOptions) {
+                this.sortedResponsiveOptions = [...this.responsiveOptions];
+                this.sortedResponsiveOptions.sort((data1, data2) => {
+                    const value1 = data1.breakpoint;
+                    const value2 = data2.breakpoint;
+                    let result = null;
+
+                    if (value1 == null && value2 != null)
+                        result = -1;
+                    else if (value1 != null && value2 == null)
+                        result = 1;
+                    else if (value1 == null && value2 == null)
+                        result = 0;
+                    else if (typeof value1 === 'string' && typeof value2 === 'string')
+                        result = value1.localeCompare(value2, undefined, { numeric: true });
+                    else
+                        result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
+
+                    return -1 * result;
+                });
+
+                for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
+                    let res = this.sortedResponsiveOptions[i];
+
+                    innerHTML += `
+                        @media screen and (max-width: ${res.breakpoint}) {
+                            #${this.containerId} .p-galleria-thumbnail-item {
+                                flex: 1 0 ${ (100/ res.numVisible) }%
+                            }
+                        }
+                    `
+                }
+            }
+
+            this.thumbnailsStyle.innerHTML = innerHTML;
+        },
+        calculatePosition() {
+            if (this.$refs.itemsContainer && this.sortedResponsiveOptions) {
+                let windowWidth = window.innerWidth;
+                let matchedResponsiveData = {
+                    numVisible: this.numVisible
+                };
+
+                for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
+                    let res = this.sortedResponsiveOptions[i];
+
+                    if (parseInt(res.breakpoint, 10) >= windowWidth) {
+                        matchedResponsiveData = res;
+                    }
+                }
+
+                if (this.d_numVisible !== matchedResponsiveData.numVisible) {
+                    this.d_numVisible = matchedResponsiveData.numVisible;
+                }
+            }
+        },
+        bindDocumentListeners() {
+            if (!this.documentResizeListener) {
+                this.documentResizeListener = () => {
+                    this.calculatePosition();
+                };
+
+                window.addEventListener('resize', this.documentResizeListener);
+            }
+        },
+        unbindDocumentListeners() {
+            if(this.documentResizeListener) {
+                window.removeEventListener('resize', this.documentResizeListener);
+                this.documentResizeListener = null;
+            }
+        },
+        isNavBackwardDisabled() {
+            return (!this.circular && this.d_activeItemIndex === 0) || (this.value.length <= this.d_numVisible);
+        },
+        isNavForwardDisabled() {
+            return (!this.circular && this.d_activeItemIndex === (this.value.length - 1)) || (this.value.length <= this.d_numVisible);
+        },
+        firstItemAciveIndex() {
+            return this.totalShiftedItems * -1;
+        },
+        lastItemActiveIndex() {
+            return this.firstItemAciveIndex() + this.d_numVisible - 1;
+        },
+        isItemActive(index) {
+            return this.firstItemAciveIndex() <= index && this.lastItemActiveIndex() >= index;
+        }
+    },
+    computed: {
+        navBackwardClass() {
+            return ['p-galleria-thumbnail-prev p-button', {
+                'p-disabled': this.isNavBackwardDisabled()
+            }];
+        },
+        navForwardClass() {
+            return ['p-galleria-thumbnail-next p-button', {
+                'p-disabled': this.isNavForwardDisabled()
+            }];
+        },
+        navBackwardIconClass() {
+            return ['p-galleria-thumbnail-prev-icon pi', {
+                'pi-chevron-left': !this.isVertical,
+                'pi-chevron-up': this.isVertical
+            }];
+        },
+        navForwardIconClass() {
+            return ['p-galleria-thumbnail-next-icon pi', {
+                'pi-chevron-right': !this.isVertical,
+                'pi-chevron-down': this.isVertical
+            }];
+        }
+    },
+    components: {
+        'GalleriaItemSlot': GalleriaItemSlot
+    }
+}
+</script>