diff --git a/src/macro-carousel/macro-carousel.js b/src/macro-carousel/macro-carousel.js index 3cc4d56..e886302 100644 --- a/src/macro-carousel/macro-carousel.js +++ b/src/macro-carousel/macro-carousel.js @@ -911,6 +911,19 @@ class MacroCarousel extends HTMLElement { return intGetter(this, 'slides-per-view', 1); } + /** + * Get the indexes of slides currently in view. + * @return {Array} + */ + get slidesInView() { + const slidesInViewIndexes = []; + for (let i = 0; i < this.slidesPerView; i++) { + slidesInViewIndexes.push((this.selected + i) % this._slides.length); + } + + return slidesInViewIndexes; + } + /** * If true, disables CSS transitions and drag deceleration. * @type {boolean} @@ -1135,16 +1148,11 @@ value. Add CSS units to its value to avoid breaking the slides layout.`); * @private */ _updateSlidesA11y() { - const slidesInView = []; - for (let i = 0; i < this.slidesPerView; i++) { - slidesInView.push((this.selected + i) % this._slides.length); - } - // Set aria-hidden to false only for the slides whose indexes are included // in the slidesInView array. let isSlideInView; this._slides.map(slide => slide.element).forEach((slideEl, slideIndex) => { - isSlideInView = !isUndefined(slidesInView.find(i => i === slideIndex)); + isSlideInView = !isUndefined(this.slidesInView.find(i => i === slideIndex)); // Slides in view have `aria-hidden` set to `false`. slideEl.setAttribute(ATTRS.STANDARD.ARIA.HIDDEN, isSlideInView ? ATTR_VALUES.FALSE : ATTR_VALUES.TRUE); diff --git a/test/selected-slides-per-view.js b/test/selected-slides-per-view.js index 3387f03..41d5e2a 100644 --- a/test/selected-slides-per-view.js +++ b/test/selected-slides-per-view.js @@ -38,5 +38,13 @@ await wcutils.flush(); expect(this.slider.selected).to.equal(numberOfSlides - 1); }); + + it('returns indexes of slides in view', async function() { + this.slider.selected = 0; + this.slider.slidesPerView = 3; + + await wcutils.flush(); + expect(this.slider.slidesInView).to.deep.equal([0, 1, 2]); + }); }); })();