uikit 3.18.4-dev.ae16f4de2 → 3.18.4-dev.b116fc18d

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit",
   "title": "UIkit",
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-  "version": "3.18.4-dev.ae16f4de2",
+  "version": "3.18.4-dev.b116fc18d",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/components/slider.js

@@ -11,6 +11,7 @@ import {
     getIndex,
     hasOwn,
     includes,
+    isNumeric,
     isVisible,
     last,
     selFocusable,
@@ -33,7 +34,7 @@ export default {
     props: {
         center: Boolean,
         sets: Boolean,
-        active: String,
+        focus: String,
     },
 
     data: {
@@ -43,7 +44,7 @@ export default {
         selList: '.uk-slider-items',
         selNav: '.uk-slider-nav',
         clsContainer: 'uk-slider-container',
-        active: 'all',
+        focus: 'all',
         Transitioner,
     },
 
@@ -237,14 +238,11 @@ export default {
         },
 
         updateActiveClasses(currentIndex = this.index) {
-            let actives = this._getTransitioner(currentIndex).getActives();
+            let actives = this._getTransitioner().getActives();
 
-            if (this.active !== 'all') {
-                let index = currentIndex;
-                if (this.active === 'center') {
-                    index += Math.ceil(actives.length / 2) - 1;
-                }
-                actives = [this.slides[this.getValidIndex(index)]];
+            if (isNumeric(this.focus)) {
+                const focus = Math.min(actives.length - 1, Number(this.focus));
+                actives = [this.slides[this.getValidIndex(currentIndex + focus)]];
             }
 
             const activeClasses = [

package/tests/slider.html

@@ -41,11 +41,6 @@
                     <option value="0">Single</option>
                     <option value="1">Sets</option>
                 </select>
-                <select id="js-active-switcher" class="uk-select uk-form-width-small" aria-label="Active switcher">
-                    <option value="">All</option>
-                    <option value="first">First</option>
-                    <option value="center">Center</option>
-                </select>
             </div>
 
             <h2>Content Widths</h2>
@@ -583,10 +578,10 @@
                             <td>Slider item to show. 0 based index.</td>
                         </tr>
                         <tr>
-                            <td><code>active</code></td>
-                            <td>String</td>
-                            <td>all</td>
-                            <td>Slider item/items to apply the transition active class to. (all|first|center)</td>
+                            <td><code>focus</code></td>
+                            <td>String, Number</td>
+                            <td>'all'</td>
+                            <td>Slider item (0 based index) or all visible items (all) to apply the activated class to.</td>
                         </tr>
                         <tr>
                             <td><code>pause-on-hover</code></td>
@@ -657,7 +652,7 @@
         <script>
 
             const {attr, $$, on} = UIkit.util;
-            for (const attribute of ['finite', 'center', 'sets', 'active']) {
+            for (const attribute of ['finite', 'center', 'sets']) {
                 on(`#js-${attribute}-switcher`, 'change', e =>
                     attr($$('[uk-slider]'), attribute, e.target.value)
                 );