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