Pure CSS img slider

카테고리 : 소개/오픈소스

슬라이드 기능을 CSS만으로 만들수있습니다.

 

다만 모바일 드래그등의 기능을 추가하려면 JS의 도움이 필요합니다.

 

드래그로 전환 기능을 제외한 왼쪽(<), 오른쪽(>) 버튼과 하단의 위치등은 CSS로 기능까지 구현이 가능합니다.

여기에는 +,~와 같은 CSS선택자가 이용됩니다.

 

+활용

.class:checked + label{
	display:block;
}

~활용

.class:checked ~ label{
	display:block;
}

차이로는 +는 하나만 선택하고 ~는 형제를 모두 선택할수있습니다.

 

이 코드의 원리분석은 매우 간단합니다.

코드가 굉장히 짧거든요

게다가 지금도 문제없이 작동하는 7년전 코드입니다.

 

html의 radio를 이용해서 현재 위치를 체크하고, radio가 체크된경우에 따라 label(여러 버튼)을 숨기고 보여서 필요한 동작을 수행할 수 있게합니다.

 

예를들어 radio의 2번이 선택된 경우 radio 1번선택 label과 3번 선택 label을 이용해 좌우의 버튼을 활성화(보이기)합니다.

 

navigation은 label로 radio와 연결합니다.

 

radio선택값이 바뀌면 left값이 바뀌어 슬라이드가 넘어갑니다.

 

 

https://github.com/drygiel/csslider

 

drygiel/csslider

Pure CSS slider. Contribute to drygiel/csslider development by creating an account on GitHub.

github.com

 

 

저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.
(웹툴을 이용하고, 스크린샷/녹화하는것은 상관없습니다.)

예외적으로. 저에게 허락받은 경우에는 본문을 전재할 수 있습니다.

만약, 본문 공유를 원하신다면 링크 공유를 해주세요

저작권 정책 확인하기
링크 공유하기

 댓글