불타는 코딩🔥

재직 중인 쇼핑몰에 사용되고 있는 슬라이드 로직입니다. (글작성기준)

개발 당시 캐러셀 라이브러리 중 요구하는 기능이 없어 fadeIn fadeOut 슬라이드를 만들어봤습니다.

요구사항

1. 자동 가운데 정렬

2. 반응형 사이즈

3. 하단 탭 올릴 시 자동 페이징

4. fadeIn fadeOut으로 페이지넘김

5. 이미지크기에 따라 높이값변경

6. IE 호환성검사 및 크로스브라우징(Chrome, IE9 기준)

7. 하단탭에 마우스오버시 시 해당 슬라이드 정지 

html(구조), css(표현), javascript(동작)의 조합이 엄청 중요하단 걸 깨우치게 한 과정이었습니다.

웹표준&웹접근성에 따라 다시 작성해야할 필요성을 느꼈고, 개발 후 굉장히 큰 산을 하나 넘은 기분이였습니다.

See the Pen fadeIn Slider 만들기 by Choidaeboem (@choidaeboem) on CodePen.