refactor: Code refactor [Basicslider] #131

bin/Controls/Slider/BasicSlider.js

@@ -134,10 +134,7 @@ define('package/quiqqer/bricks/bin/Controls/Slider/BasicSlider', [
                 });
 
                 if (self.Dots) {
-                    moofx(self.Dot).animate({
-                        'background-color': 'rgba(0,0,0,0)',
-                        'border-color': '#e2e2e2'
-                    });
+                    self.Dot.classList.remove('active');
                 }
             });
         },
@@ -163,10 +160,7 @@ define('package/quiqqer/bricks/bin/Controls/Slider/BasicSlider', [
                 });
 
                 if (self.Dots) {
-                    moofx(self.NextDot).animate({
-                        'background-color': '#2681da',
-                        'border-color': '#2681da'
-                    });
+                    self.NextDot.classList.add('active');
                 }
             });
         },

src/QUI/Bricks/Controls/Slider/BasicSlider.css

@@ -51,9 +51,10 @@
     border: 2px solid #e2e2e2;
     border-radius: 50%;
     margin: 0 5px;
+    transition: all 0.2s ease-in-out;
 }
 
-.basic-slider-dots li:first-child {
+.basic-slider-dots li.active {
     background-color: #2681da;
     border-color: #2681da;
 }

src/QUI/Bricks/Controls/Slider/BasicSlider.html

@@ -34,7 +34,7 @@
         <ul class="basic-slider-dots">
             {foreach from=$images item=Image key=key}
 
-            <li class="basic-slider-dot"></li>
+                <li class="basic-slider-dot {if $key===0}active{/if}"></li>
 
             {/foreach}
         </ul>