다음 슬라이드 단추를 선택하면 회전판 세트의 다음 슬라이드로 이동합니다.
이 단추는 터치 장치에 표시되지 않습니다. CSS를 사용하여 이 단추의 크기를 지정하고, 스킨을 지정하고, 위치를 지정할 수 있습니다.
기본 뷰어 영역의 CSS 속성
버튼의 모양은 다음 CSS 클래스 선택기로 제어됩니다.
.s7carouselviewer .s7panrightbutton
CSS 속성 |
설명 |
---|---|
최상위 |
뷰어 테두리의 맨 위에서 위치를 지정합니다. |
오른쪽 |
뷰어 테두리 오른쪽의 위치입니다. |
왼쪽 |
뷰어 왼쪽에서 위치를 지정합니다. |
하단 |
뷰어 테두리의 하단에서 위치를 지정합니다. |
width |
단추의 폭입니다. |
height |
단추의 높이입니다. |
배경 이미지 |
지정된 단추 상태에 대해 표시되는 이미지입니다. |
배경 위치 |
CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 위치를 지정합니다. CSS 스프라이트 도 참조하십시오. |
커서 |
커서 유형입니다. |
이 버튼은 state
속성 선택기를 지원하며, 이 선택기를 사용하여 다른 스킨을 다른 단추 상태에 적용할 수 있습니다.
단추 도구 팁은 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소 현지화를 참조하십시오.
예를 들어 60 x 60픽셀인 이전 슬라이드 단추를 설정한다고 가정합니다. 단추를 오른쪽 뷰어 테두리에서 10픽셀로 놓고 세로로 가운데에 맞추려고 합니다. 이렇게 하면 네 개의 서로 다른 단추 상태에 대해 다른 이미지를 표시할 수 있습니다.
.s7carouselviewer .s7panrightbutton{
bottom: 50%;
right: 10px;
background-size:60px;
cursor: pointer;
}
.s7carouselviewer.s7mouseinput .s7panrightbutton {
width:60px;
height:60px;
margin-bottom: -20px;
}
.s7carouselviewer.s7mouseinput .s7panrightbutton[state] {
background-image: url(../../viewers/s7viewers/html5/images/v2/CarouselDotsRightButton_dark_sprite.png);
}
.s7carouselviewer.s7mouseinput .s7panrightbutton[state='up'] { background-position: -0px -60px; }
.s7carouselviewer.s7mouseinput .s7panrightbutton[state='over'] { background-position: -0px -0px; }
.s7carouselviewer.s7mouseinput .s7panrightbutton[state='down'] { background-position: -0px -0px; }
.s7carouselviewer.s7mouseinput .s7panrightbutton[state='disabled'] { background-position: -0px -60px; }