W3.JS HTML 슬라이드쇼
슬라이드쇼 시작:
w3.slideshow(selector, interval (milliseconds))
예시
<img class="nature" src="img_snowtops.jpg">
<img class="nature" src="img_mountains.jpg">
<img class="nature" src="img_nature.jpg">
<script>
w3.slideshow(".nature");
</script>
자동 시작 없음
슬라이드쇼가 자동으로 시작되지 않도록 하려면 간격 매개변수를 0으로 설정하십시오.
예시
w3.slideshow(".nature", 0);
다음 슬라이드
슬라이드쇼를 탐색하는 버튼 추가:
슬라이드쇼를 시작할 때 w3.slideshow() 함수는 슬라이드쇼를 나타내는 객체를 반환합니다.
var
myShow = w3.slideshow(".nature", 0);
슬라이드쇼 객체에는 다음() 및 이전()과 같은 속성과 메서드가 포함되어 있습니다.
예시
<button onclick="myShow.previous()">Previous</button>
<button onclick="myShow.next()">Next</button>
더 많은 슬라이드쇼
모든 HTML 요소는 슬라이드쇼에 포함될 수 있습니다.
CSS 선택기를 사용하여 정의합니다.
예시
헤더:
<h1 class="city">London</h1>
<h1 class="city">Paris</h1>
<h1
class="city">Tokyo</h1>
<script>
w3.slideshow(".city");
</script>