diff --git a/source/Ox.UI/js/Panel/SlidePanel.js b/source/Ox.UI/js/Panel/SlidePanel.js
new file mode 100644
index 00000000..23524e36
--- /dev/null
+++ b/source/Ox.UI/js/Panel/SlidePanel.js
@@ -0,0 +1,62 @@
+'use strict';
+
+Ox.SlidePanel = function(options, self) {
+
+    self = self || {};
+    var that = Ox.Element({}, self)
+        .defaults({
+            animate: 250,
+            elements: [],
+            selected: ''
+        })
+        .options(options || {})
+        .update({
+            selected: function() {
+                selectElement(self.options.selected);
+            }
+        })
+        .addClass('OxSlidePanel');
+
+    if (!self.options.selected) {
+        self.options.selected = self.options.elements[0].id
+    }
+    self.elements = self.options.elements.length;
+    self.$content = Ox.Element()
+        .css(getContentCSS())
+        .appendTo(that);
+    self.options.elements.forEach(function(element) {
+        element
+            .css({width: self.options.width + 'px'})
+            .appendTo(self.$content);
+    });
+
+    function getContentCSS() {
+        return {
+            left: -getIndexById(self.options.elements, self.options.selected)
+                * self.options.width + 'px',
+            width: self.options.width + 'px'
+        };
+    }
+
+    function getElementCSS(index) {
+        return {
+            left: index * self.options.width + 'px',
+            width: self.options.width + 'px'
+        };
+    }
+
+    function selectElement(id) {
+        self.content.animate(getContentCSS(), self.options.animate);
+    }
+
+    that.replaceElement = function(idOrIndex, element) {
+        var index = Ox.isNumber(idOrIndex) ? idOrIndex
+            : Ox.getIndexById(self.options.elements, idOrIndex);
+        self.options.elements[index].replaceWith(
+            self.options.elements[index] = element.css(getElementCSS())
+        );
+    };
+
+    return that;
+
+};
\ No newline at end of file