diff --git a/components/AddDeck/ThemePreviewCarousel.js b/components/AddDeck/ThemePreviewCarousel.js
new file mode 100644
index 000000000..f34d99515
--- /dev/null
+++ b/components/AddDeck/ThemePreviewCarousel.js
@@ -0,0 +1,96 @@
+import React from 'react';
+
+class ThemePreviewCarousel extends React.Component {
+
+ constructor(props) {
+ super(props);
+ this.slider = null;
+ }
+
+ componentDidMount() {
+ let self = this;
+ $('.gslide-header').removeClass('active');
+ $('.gh1').addClass('active');
+ //display carousel
+ $('.hide-element').removeClass('hide-element');
+ this.slider = $('.glide').glide({
+ type: 'slideshow',
+ startAt: self.findThemeIndex(self.props.initialTheme, self.props.slides),
+ autoplay: false,
+ centered: true,
+ keyboard: true,
+ autoheight: true,
+ afterTransition: function(data) {
+ let themeIndex = (data.index !== 0) ? data.index - 1 : self.props.slides.length - 1;
+ self.onSelectTheme(self.props.slides[themeIndex].value, null);
+ $('.gslide-header').removeClass('active');
+ $('.gh' + data.index).addClass('active');
+ }
+ });
+ }
+
+ componentWillReceiveProps(newProps) {
+ console.log('parent: ' + newProps.initialTheme);
+ if (!this.props.initialTheme && newProps.initialTheme) {
+ console.log('setting initialTheme');
+ this.setStart(newProps.initialTheme);
+ this.initialTheme = newProps.initialTheme;
+ }
+ }
+
+ setStart(theme) {
+ let themeIndex = this.findThemeIndex(theme, this.props.slides);
+ this.slider.data('glide_api').go('=' + themeIndex);
+ }
+
+ findThemeIndex(theme, slides) {
+ for (let i = 0; i < slides.length; i++) {
+ console.log(slides[i].value, theme);
+ if (theme === slides[i].value) return i + 1;
+ }
+ }
+
+ onSelectTheme(themeValue, e) {
+ console.log(themeValue);
+ this.props.callback(themeValue);
+ }
+
+ createSlides() {
+ let slides = [];
+
+ for (let i=0; i
+ 
+
+ );
+ }
+ return (
+
+ );
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+ { this.createSlides() }
+
+
+
+
+