feat: add focus option to Slider component

uikit · Feb 20, 2024 · ae16f4d · ae16f4d
1 parent 9f3ec94
commit ae16f4d
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Added
 
 - Add breakpoint classes for flex vertical alignment
+- Add `active` option to Slider component
 
 ### Fixed
 

diff --git a/src/js/components/slider.js b/src/js/components/slider.js
@@ -33,6 +33,7 @@ export default {
     props: {
         center: Boolean,
         sets: Boolean,
+        active: String,
     },
 
     data: {
@@ -42,6 +43,7 @@ export default {
         selList: '.uk-slider-items',
         selNav: '.uk-slider-nav',
         clsContainer: 'uk-slider-container',
+        active: 'all',
         Transitioner,
     },
 
@@ -235,7 +237,15 @@ export default {
         },
 
         updateActiveClasses(currentIndex = this.index) {
-            const actives = this._getTransitioner(currentIndex).getActives();
+            let actives = this._getTransitioner(currentIndex).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)]];
+            }
 
             const activeClasses = [
                 this.clsActive,

diff --git a/tests/slider.html b/tests/slider.html
@@ -41,6 +41,11 @@ <h1>Slider</h1>
                     <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>
@@ -577,6 +582,12 @@ <h2>JavaScript Options</h2>
                             <td>0</td>
                             <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>
+                        </tr>
                         <tr>
                             <td><code>pause-on-hover</code></td>
                             <td>Boolean</td>
@@ -646,7 +657,7 @@ <h2>i18n</h2>
         <script>
 
             const {attr, $$, on} = UIkit.util;
-            for (const attribute of ['finite', 'center', 'sets']) {
+            for (const attribute of ['finite', 'center', 'sets', 'active']) {
                 on(`#js-${attribute}-switcher`, 'change', e =>
                     attr($$('[uk-slider]'), attribute, e.target.value)
                 );