diff --git a/bin/Controls/Slider/BasicSlider.js b/bin/Controls/Slider/BasicSlider.js
index 67947f5abb66392cdc8db521d388e4cac4574aec..86e555063b0c090101a5af26d5e86db2c8b25103 100644
--- a/bin/Controls/Slider/BasicSlider.js
+++ b/bin/Controls/Slider/BasicSlider.js
@@ -9,7 +9,7 @@ define('package/quiqqer/bricks/bin/Controls/Slider/BasicSlider', [
     'qui/QUI',
     'qui/controls/Control',
 
-], function (QUI, QUIControl, Hammer) {
+], function (QUI, QUIControl) {
     "use strict";
 
     return new Class({
@@ -33,7 +33,6 @@ define('package/quiqqer/bricks/bin/Controls/Slider/BasicSlider', [
             this.parent(options);
 
             this.List = false;
-            this.ListLength = false;
 
             this.addEvents({
                 onImport: this.$onImport
@@ -46,23 +45,94 @@ define('package/quiqqer/bricks/bin/Controls/Slider/BasicSlider', [
          * event : on import
          */
         $onImport: function () {
-            var self = this,
-                Elm  = this.getElm();
+            var Elm  = this.getElm();
 
             this.List = Elm.getElement(".basic-slider-images");
-            this.ListLength = this.List.getElements('li').length;
+            this.Slide = this.List.getFirst('li');
 
-            this.$change(2);
+            this.$next();
         },
 
-        $change: function (slideNr) {
+        $next: function () {
+            var self = this;
+            var NextSlide = this.Slide.getNext();
+            var Image = false;
+
+            if(!NextSlide) {
+                NextSlide = this.List.getFirst('li');
+            }
+
+            if(!NextSlide.getElement('img')) {
+                var url = NextSlide.get('data-image');
+
+                Image = self.$createImage(url);
+            }
+
+            (function () {
+                if (!Image) {
+                    self.$change(NextSlide).then(function () {
+                        self.$next();
+                    });
+                    return;
+                }
+
+                Image.then(function (resolve) {
+
+                    resolve.inject(NextSlide);
+                    self.$change(NextSlide).then(function () {
+                        self.$next();
+                    });
+                });
+            }).delay(this.getAttribute('delay'));
+        },
 
-            console.log();
+        $change: function (NextSlide) {
+            var self = this;
 
-            var Slide = this.List.getElement('li:nth-child(' + slideNr + ')');
+            return new Promise(function (resolve){
+                self.$hide(self.Slide).then(function () {
+                    self.$show(NextSlide);
+                    self.Slide = NextSlide;
+                    resolve();
+                });
+            });
+        },
 
-            var image = Slide.get('data-image');
+        $hide: function (PreviousSlide) {
+            return new Promise(function (resolve){
+                moofx(PreviousSlide).animate({
+                    'left': '-50',
+                    'opacity' : '0'
+                }, {
+                    duration: 250,
+                    callback: resolve
+                });
+            });
+        },
 
+        $show: function (Slide) {
+            return new Promise(function (resolve) {
+                moofx(Slide).animate({
+                    'left': '0',
+                    'opacity' : '1'
+                }, {
+                    duration: 500,
+                    callback: resolve
+                });
+            });
+        },
+
+        $createImage: function (url) {
+            return new Promise(function (resolve) {
+
+                var Img = new Element('img', {
+                    'src': url
+                });
+
+                Img.addEventListener('load', () => {
+                    resolve(Img);
+                });
+            });
         }
     });
 });
\ No newline at end of file
diff --git a/src/QUI/Bricks/Controls/Slider/BasicSlider.css b/src/QUI/Bricks/Controls/Slider/BasicSlider.css
index f9803035d44483fd35270f84134860b5caffef59..5d9a9d6b9603163c519d6c609cb323ff2b9362a3 100644
--- a/src/QUI/Bricks/Controls/Slider/BasicSlider.css
+++ b/src/QUI/Bricks/Controls/Slider/BasicSlider.css
@@ -3,15 +3,28 @@
     flex-direction: row;
 }
 
-.basic-slider-wrapper li {
-    list-style: none;
-}
-
 .basic-slider-content,
 .basic-slider-image-wrapper {
     width: 50%;
 }
 
+.basic-slider-image-wrapper {
+    position: relative;
+}
+
+.basic-slider-image-wrapper li {
+    list-style: none;
+    position: absolute;
+    top: 0;
+    left: -50px;
+    opacity: 0;
+}
+
+.basic-slider-image-wrapper li:nth-child(1) {
+    opacity: 1;
+    left: 0;
+}
+
 .basic-slider-content {
     padding-right: 20px;
 }
\ No newline at end of file
diff --git a/src/QUI/Bricks/Controls/Slider/BasicSlider.html b/src/QUI/Bricks/Controls/Slider/BasicSlider.html
index 691abc6fde7a11e1984c9aa9658aadbb9fabe355..8e90b8c80be7620095286cf02646634f6f7646cd 100644
--- a/src/QUI/Bricks/Controls/Slider/BasicSlider.html
+++ b/src/QUI/Bricks/Controls/Slider/BasicSlider.html
@@ -20,7 +20,7 @@
 
         <ul class="basic-slider-images">
         {foreach from=$images item=Image}
-            <li data-image="{image image=$Image onlysrc=1 host=1}">
+            <li data-image="{image image=$Image onlysrc=1 width=500}" class="test">
 
                 {if $Image==$images[0]}
                 {image image=$Image}