From 729dcd49d4d313b6fc74c6d6160286caca331515 Mon Sep 17 00:00:00 2001 From: Greg Westneat Date: Thu, 3 Aug 2017 20:36:49 -0700 Subject: [PATCH 1/2] added option to enable focus on slideChange --- slick/slick.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/slick/slick.js b/slick/slick.js index ae0a1b209..3e6e0c3e3 100644 --- a/slick/slick.js +++ b/slick/slick.js @@ -61,6 +61,7 @@ edgeFriction: 0.35, fade: false, focusOnSelect: false, + focusOnChange: false, infinite: true, initialSlide: 0, lazyLoad: 'ondemand', @@ -1089,7 +1090,7 @@ if (_.slideCount > _.options.slidesToShow) { _.slideOffset = (_.slideWidth * _.options.slidesToShow) * -1; coef = -1 - + if (_.options.vertical === true && _.options.centerMode === true) { if (_.options.slidesToShow === 2) { coef = -1.5; @@ -1318,7 +1319,7 @@ 'role': 'tabpanel', 'id': 'slick-slide' + _.instanceUid + i, 'tabindex': -1 - }); + }); if (slideControlIndex !== -1) { $(this).attr({ @@ -1329,7 +1330,7 @@ _.$dots.attr('role', 'tablist').find('li').each(function(i) { var mappedSlideIndex = tabControlIndexes[i]; - + $(this).attr({ 'role': 'presentation' }); @@ -1376,7 +1377,7 @@ if (_.options.accessibility === true) { _.$prevArrow.on('keydown.slick', _.keyHandler); _.$nextArrow.on('keydown.slick', _.keyHandler); - } + } } }; @@ -1696,8 +1697,8 @@ if (_.options.accessibility === true) { _.initADA(); - // for non-autoplay: once active slide (group) has updated, set focus on first newly showing slide - if (!_.options.autoplay) { + // for non-autoplay: once active slide (group) has updated, set focus on first newly showing slide + if (_.options.focusOnChange) { var $currentSlide = $(_.$slides.get(_.currentSlide)); $currentSlide.attr('tabindex', 0).focus(); } From da4bdcbd9312ea7efb05bdb0709a29ede20b4430 Mon Sep 17 00:00:00 2001 From: Greg Westneat Date: Thu, 3 Aug 2017 22:52:50 -0700 Subject: [PATCH 2/2] updated readme --- README.markdown | 24 +++++++++++++----------- slick/slick.js | 2 +- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/README.markdown b/README.markdown index d349ac6d1..2cd220023 100644 --- a/README.markdown +++ b/README.markdown @@ -20,8 +20,8 @@ to serve the files as close, and fast as possible to your users: ##### Example using jsDelivr Just add a link to the css file in your ``: -```html +```html @@ -68,8 +68,12 @@ Example: Option | Type | Default | Description ------ | ---- | ------- | ----------- -accessibility | boolean | true | Enables tabbing and arrow key navigation. Unless `autoplay: true`, sets browser focus to current slide (or first of current slide set, if multiple `slidesToShow`) after slide change. +accessibility | boolean | true | Enables tabbing and arrow key navigation. Unless `autoplay: true`, sets browser focus to current slide (or first of current slide set, if multiple `slidesToShow`) after slide change. For full a11y compliance enable focusOnChange in addition to this. adaptiveHeight | boolean | false | Adapts slider height to the current slide +appendArrows | string | $(element) | Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object) +appendDots | string | $(element) | Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object) +arrows | boolean | true | Enable Next/Prev arrows +asNavFor | string | $(element) | Enables syncing of multiple sliders autoplay | boolean | false | Enables auto play of slides autoplaySpeed | int | 3000 | Auto play change interval centerMode | boolean | false | Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts. @@ -82,25 +86,24 @@ draggable | boolean | true | Enables desktop dragging easing | string | 'linear' | animate() fallback easing edgeFriction | integer | 0.15 | Resistance when swiping edges of non-infinite carousels fade | boolean | false | Enables fade -arrows | boolean | true | Enable Next/Prev arrows -appendArrows | string | $(element) | Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object) -appendDots | string | $(element) | Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object) -mobileFirst | boolean | false | Responsive settings use mobile first calculation -prevArrow | string (html \| jQuery selector) \| object (DOM node \| jQuery object) | `` | Allows you to select a node or customize the HTML for the "Previous" arrow. -nextArrow | string (html \| jQuery selector) \| object (DOM node \| jQuery object) | `` | Allows you to select a node or customize the HTML for the "Next" arrow. +focusOnChange | boolean | false | Puts focus on slide after change infinite | boolean | true | Infinite looping initialSlide | integer | 0 | Slide to start on lazyLoad | string | 'ondemand' | Accepts 'ondemand' or 'progressive' for lazy load technique. 'ondemand' will load the image as soon as you slide to it, 'progressive' loads one image after the other when the page loads. +mobileFirst | boolean | false | Responsive settings use mobile first calculation +nextArrow | string (html \| jQuery selector) \| object (DOM node \| jQuery object) | `` | Allows you to select a node or customize the HTML for the "Next" arrow. +pauseOnDotsHover | boolean | false | Pauses autoplay when a dot is hovered pauseOnFocus | boolean | true | Pauses autoplay when slider is focussed pauseOnHover | boolean | true | Pauses autoplay on hover -pauseOnDotsHover | boolean | false | Pauses autoplay when a dot is hovered +prevArrow | string (html \| jQuery selector) \| object (DOM node \| jQuery object) | `` | Allows you to select a node or customize the HTML for the "Previous" arrow. respondTo | string | 'window' | Width that responsive object responds to. Can be 'window', 'slider' or 'min' (the smaller of the two). responsive | array | null | Array of objects [containing breakpoints and settings objects (see example)](#responsive-option-example). Enables settings at given `breakpoint`. Set `settings` to "unslick" instead of an object to disable slick at a given breakpoint. rows | int | 1 | Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row. +rtl | boolean | false | Change the slider's direction to become right-to-left slide | string | '' | Slide element query slidesPerRow | int | 1 | With grid mode initialized via the rows option, this sets how many slides are in each grid row. -slidesToShow | int | 1 | # of slides to show at a time slidesToScroll | int | 1 | # of slides to scroll at a time +slidesToShow | int | 1 | # of slides to show at a time speed | int | 300 | Transition speed swipe | boolean | true | Enables touch swipe swipeToSlide | boolean | false | Swipe to slide irrespective of slidesToScroll @@ -111,7 +114,6 @@ useTransform | boolean | true | Enable/Disable CSS Transforms variableWidth | boolean | false | Disables automatic slide width calculation vertical | boolean | false | Vertical slide direction verticalSwiping | boolean | false | Changes swipe direction to vertical -rtl | boolean | false | Change the slider's direction to become right-to-left waitForAnimate | boolean | true | Ignores requests to advance the slide while animating zIndex | number | 1000 | Set the zIndex values for slides, useful for IE9 and lower diff --git a/slick/slick.js b/slick/slick.js index 3e6e0c3e3..81b9e0d1c 100644 --- a/slick/slick.js +++ b/slick/slick.js @@ -1697,7 +1697,7 @@ if (_.options.accessibility === true) { _.initADA(); - // for non-autoplay: once active slide (group) has updated, set focus on first newly showing slide + if (_.options.focusOnChange) { var $currentSlide = $(_.$slides.get(_.currentSlide)); $currentSlide.attr('tabindex', 0).focus();