w3.css

슬라이드쇼

슬라이드쇼를 만드는 방법에 대해 알아보자.

수동 슬라이드쇼

W3.CSS를 사용하여 수동 슬라이드쇼를 표시하는 것은 매우 쉽다.

동일한 클래스 이름을 가진 많은 요소를 생성하자.

<img class="mySlides" src="img_snowtops.jpg">
<img class="mySlides" src="img_lights.jpg">
<img class="mySlides" src="img_mountains.jpg">
<img class="mySlides" src="img_forest.jpg">

이미지를 스크롤하는 두 개의 버튼

<button class="w3-button w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-display-right" onclick="plusDivs(+1)">❯</button>

그리고 이미지를 선택하려면 JavaScript를 추가한다.

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length} ;
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}

자바스크립트 설명

먼저, SlideIndex를 1로 설정한다. (첫 번째 사진)

그런 다음 showDivs()를 호출하여 첫 ​​번째 이미지를 표시한다.

사용자가 버튼 중 하나를 클릭하면 plusDivs()를 호출한다.

plusDivs() 함수는 SlideIndex에 하나를 빼거나 하나를 추가한다.

showDiv() 함수는 클래스 이름이 "mySlides"인 모든 요소를 ​​숨기고(display="none") 주어진 SlideIndex를 가진 요소를 표시(display="block")한다.

SlideIndex가 요소 수(x.length)보다 큰 경우 SlideIndex는 0으로 설정된다.

SlideIndex가 1 보다 작으면 요소 수(x.length)로 설정된다.

자동 슬라이드쇼

자동 슬라이드쇼를 표시하는 방법은 더욱 간단하다.

약간 다른 JavaScript만 필요하다.

예제

var slideIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > x.length) {slideIndex = 1}
  x[slideIndex-1].style.display = "block";
  setTimeout(carousel, 2000); // Change image every 2 seconds
}

HTML 슬라이드

슬라이드는 이미지일 필요는 없다.

모든 HTML 콘텐츠가 될 수 있다.

예제

<div class="mySlides">
  <div class="w3-container w3-red">
    <h1><b>Did You Know?</b></h1>
    <h1><i>We plan to sell trips to the moon in the 2020s</i></h1>
  </div>
</div>

슬라이드쇼 캡션

w3-display-* 클래스(왼쪽 상단, 상단 중간, 상단 오른쪽, 하단 왼쪽, 하단 중간, 하단 오른쪽, 왼쪽, 오른쪽 또는 중간)를 사용하여 각 이미지 슬라이드에 캡션 텍스트를 추가한다.

예제

<div class="w3-display-container mySlides">
  <img src="img_snowtops.jpg" style="width:100%">
  <div class="w3-display-bottomleft w3-container w3-padding-16 w3-black">
    French Alps
  </div>
</div>

슬라이드쇼 표시기

슬라이드쇼에 있는 슬라이드 수와 사용자가 현재 보고 있는 슬라이드를 나타내는 버튼을 사용하는 예이다.

예제

<div class="w3-center">
  <button class="w3-button" onclick="plusDivs(-1)">❮ Prev</button>
  <button class="w3-button" onclick="plusDivs(1)">Next ❯</button>

  <button class="w3-button demo" onclick="currentDiv(1)">1</button>
  <button class="w3-button demo" onclick="currentDiv(2)">2</button>
  <button class="w3-button demo" onclick="currentDiv(3)">3</button>
</div>

다른 예시:

예제

<div class="w3-content w3-display-container">
  <img class="mySlides" src="img_nature.jpg">
  <img class="mySlides" src="img_snowtops.jpg">
  <img class="mySlides" src="img_mountains.jpg">
  <div class="w3-center w3-display-bottommiddle" style="width:100%">
    <div class="w3-left" onclick="plusDivs(-1)">❮</div>
    <div class="w3-right" onclick="plusDivs(1)">❯</div>
    <span class="w3-badge demo w3-border" onclick="currentDiv(1)"></span>
    <span class="w3-badge demo w3-border" onclick="currentDiv(2)"></span>
    <span class="w3-badge demo w3-border" onclick="currentDiv(3)"></span>
  </div>
</div>

지표로서의 이미지

이미지를 지표로 사용하는 예이다.

예제

<div class="w3-content" style="max-width:1200px">
  <img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
  <img class="mySlides" src="img_snow_wide.jpg" style="width:100%">
  <img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">

  <div class="w3-row-padding w3-section">
    <div class="w3-col s4">
      <img class="demo w3-opacity" src="img_nature_wide.jpg"
      style="width:100%" onclick="currentDiv(1)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity" src="img_snow_wide.jpg"
      style="width:100%;display:none" onclick="currentDiv(2)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity" src="img_mountains_wide.jpg"
      style="width:100%;display:none" onclick="currentDiv(3)">
    </div>
  </div>
</div>

같은 페이지에 여러 슬라이드쇼 표시

한 페이지에서 여러 슬라이드쇼를 운영하려면 각 슬라이드쇼 그룹의 구성원을 서로 다른 클래스로 분류해야 한다.

예제

<div class="w3-content">
<img class="mySlides1" src="img_snowtops.jpg" style="width:100%">
<img class="mySlides1" src="img_lights.jpg" style="width:100%">
<img class="mySlides1" src="img_mountains.jpg" style="width:100%">
<img class="mySlides1" src="img_forest.jpg" style="width:100%">
</div>

<div class="w3-content">
<img class="mySlides2" src="img_la.jpg" style="width:100%">
<img class="mySlides2" src="img_ny.jpg" style="width:100%">
<img class="mySlides2" src="img_chicago.jpg" style="width:100%">
</div>

애니메이션 슬라이드

w3-animate-* 클래스를 사용하여 화면의 상단, 하단, 왼쪽 또는 오른쪽에서 요소를 슬라이드하거나 페이드 인한다.

예제

<img class="mySlides w3-animate-top"    src="img_01.jpg">
<img class="mySlides w3-animate-bottom" src="img_02.jpg">
<img class="mySlides w3-animate-top"    src="img_03.jpg">
<img class="mySlides w3-animate-bottom" src="img_04.jpg">

희미한 애니메이션

w3-animate-fading 클래스는 요소를 페이드 인 및 페이드 아웃한다(약 10초 소요).

예제

<img class="mySlides w3-animate-fading" src="img_01.jpg">
<img class="mySlides w3-animate-fading" src="img_02.jpg">
<img class="mySlides w3-animate-fading" src="img_03.jpg">
<img class="mySlides w3-animate-fading" src="img_04.jpg">