순수한 CSS, 간단한 슬라이더.
몇 가지 예는 다음과 같습니다.
(tested only on 30)(tested only on 24)9 전환 없음10+ 완벽하게 작동합니다(tested only on 12) <head> 요소 끝에 CSS 스타일 시트를 포함시킵니다.
< link rel =" stylesheet " href =" /path/to/csslider.css " />웹 페이지에 코드를 넣으십시오.
< div class =" csslider " >
< input type =" radio " name =" slides " id =" slides_1 " checked />
< input type =" radio " name =" slides " id =" slides_2 " />
< input type =" radio " name =" slides " id =" slides_3 " />
< input type =" radio " name =" slides " id =" slides_4 " />
< input type =" radio " name =" slides " id =" slides_N " />
< ul >
< li > Content of slide 1 </ li >
< li > Content of slide 2 </ li >
< li > Content of slide 3 </ li >
< li > Content of slide 4 </ li >
< li > Content of slide N </ li >
</ ul >
< div class =" arrows " >
< label for =" slides_1 " > </ label >
< label for =" slides_2 " > </ label >
< label for =" slides_3 " > </ label >
< label for =" slides_4 " > </ label >
< label for =" slides_N " > </ label >
< label for =" slides_1 " class =" goto-first " > </ label >
< label for =" slides_N " class =" goto-last " > </ label >
</ div >
< div class =" navigation " >
< div >
< label for =" slides_1 " > </ label >
< label for =" slides_2 " > </ label >
< label for =" slides_3 " > </ label >
< label for =" slides_4 " > </ label >
< label for =" slides_N " > </ label >
</ div >
</ div >
</ div >코드 jade 템플릿 파일에서 생성 할 수 있습니다
기본 구성은 파일이 적게 설정할 수 있습니다.
특정 요소에 대한 구성을 변경하려면 기본 구성을 재정의해야합니다. 예를 들어 ID #my-slider 있는 요소가 있고 변경하려는 경우 :
# my-slider . arrows label {
border-left-color : red;
border-right-color : red;
} # my-slider . inside . navigation label {
border : 1 px solid red;
}
