slick slider

Settings $('.slider-items').slick({ rows: 1, //이미지를 몇 줄로 표시할지 개수 dots: false, //슬라이더 아래에 도트 네비게이션 버튼 표시 여부(true or false) ▶기본값 false appendDots: $('selector'), //네비게이션 버튼 변경 dotsClass: 'custom-dots', //네비게이션 버튼 클래스 변경 infinite: true, //무한반복(true or false) 기본값 true slidesToShow: 4, //한번에 보여줄 슬라이드 아이템 개수 slidesToScroll: 4, //한번에 넘길 슬라이드 아이템 개수 slidesPerRow: 1, //보여질 행의 수 (한 줄, 두 줄 ... ) autoplay: ..

2023.11.03

WAI-ARIA 요소 - role="slider"

숫자를 조절하는 컨트롤 요소인 WAI-ARIA의 커스텀 슬라이더 위젯의 소개, 접근성이 지켜진 커스텀 슬라이더 위젯을 위한 올바른 마크업 방법 및 주의점에 대해 살펴보도록 하겠습니다. 또한, 스크린 리더 사용자를 포함한 키보드 사용자의 키보드 상호작용에 대해서도 살펴봅니다. 슬라이더 컨트롤 요소란? 슬라이더 요소는 숫자를 마우스 또는 키보드로 줄이거나, 늘릴 수 있는 막대 형태의 요소로, 안드로이드 운영체제에서는 시크 바(seek bar) 라고 불리며, 수치를 조절하는 컨텐츠에 주로 사용됩니다. 커스텀 슬라이더의 등장 배경 : range 입력 서식의 소개 웹에서의 슬라이더는 크게 두 가지 방법으로 제공할 수 있습니다. 첫 번재는 태그를 이용한 네이티브 마크업 방법이 있으며, 두 번째는 자바스크립트의 라..

2023.01.24