diff --git a/bin/Controls/Slider/BasicSlider.js b/bin/Controls/Slider/BasicSlider.js index 59ab3fee85c55b4ca40e1fd164e1a0d66871d01d..5b794123913053398e8f76ff67ae13c53b9691e8 100644 --- a/bin/Controls/Slider/BasicSlider.js +++ b/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'); } }); }, diff --git a/src/QUI/Bricks/Controls/Slider/BasicSlider.css b/src/QUI/Bricks/Controls/Slider/BasicSlider.css index e1ff3139d4f3239fc7aa2c3cac09ce35316bbb1d..071b11ab982e5e3493604009e7e4df13b7023020 100644 --- a/src/QUI/Bricks/Controls/Slider/BasicSlider.css +++ b/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; } diff --git a/src/QUI/Bricks/Controls/Slider/BasicSlider.html b/src/QUI/Bricks/Controls/Slider/BasicSlider.html index 2b18f459fc36d324953a4c0f7d82675160a270d4..5b9fee5da72399d418ceded1b4250cf8257c5449 100644 --- a/src/QUI/Bricks/Controls/Slider/BasicSlider.html +++ b/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>