TEST

//- TODO //-- Make the slider accessible (#accessibility) for each user - const images = [ { src: "https://images.pexels.com/photos/1612360/pexels-photo-1612360.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", alt: "Brown and White Mountain", }, { src: "https://images.pexels.com/photos/3062964/pexels-photo-3062964.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", alt: "Reindeer on Snow", }, { src: "https://images.pexels.com/photos/1576737/pexels-photo-1576737.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", alt: "Trees Covered With Snow", }, { src: "https://images.pexels.com/photos/1878810/pexels-photo-1878810.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", alt: "Cabin Near Trees", } ]; //- create an ID for each img each img, key in images -img.id = key //- only create the slider if there is at least one image if images.length > 0 .slider .slider__header p.slider__numbers span#slider__current-img-nbr 1 | \ span= images.length .slider__prev-next-btns button.slider__prev-next-btn.slider__prev-next-btn_prev#slider__prev-btn(aria-label="Previous image.") i.fa.fa-chevron-left button.slider__prev-next-btn.slider__prev-next-btn_next#slider__next-btn(aria-label="Next image.") i.fa.fa-chevron-right p.slider__caption#slider__caption= images[0].alt .slider__big-img each img, key in images if key === 0 img.active(src=img.src alt=img.alt data-img-id=img.id) else img(src=img.src alt=img.alt data-img-id=img.id) .slider__buttons#slider__buttons each img, key in images if key === 0 button.slider__button.slider__button_active(data-btn-id=img.id) else button.slider__button(data-btn-id=img.id)