W3.CSS スライドショー

❮ 前章へ 次章へ ❯
❮ ❯

マニュアルのスライドショー

W3.CSS を使用したマニュアルのスライドショーを表示するのは非常に簡単です。

先ず、同じクラス名を持つ要素を多数作成し：

例

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

次に、画像をスクロールする 2 つのボタン設定し：

例

<a class="w3-btn-floating" onclick="plusDivs(-1)">&#10094;</a>
<a class="w3-btn-floating" onclick="plusDivs(+1)">&#10095;</a>

最後に、画像を選択するための 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";
}
Try It Yourself ❯

JavaScript の説明

まず、slideIndex に 1 を設定する。（最初の写真）

次に、最初の写真を表示するために showDivs() を呼び出す。

ユーザが、いずれかのボタンをクリックしたときに plusDivs() を呼び出す。

plusDivs() 関数は、slideIndex から 1 を引くか、1 を加える。

showDiv() 関数は、クラス名 "mySlides" を持つすべての要素を非表示にし（display="none"）、 指定された slideIndex を持つ要素を表示する（display="block"）。

slideIndex が要素数（x.length）よりも大きい場合、slideIndex にはゼロを設定する。

slideIndex が要素数 1 よりも小さい場合、slideIndex には要素数（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
}
Try It Yourself ❯

HTML スライド

スライドは画像である必要はありません。

全ての HTML コンテンツを指定できます：

Slide 1

Lorem ipsum

Slide 2

Lorem ipsum

Slide 3

Lorem ipsum

例

<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>
Try It Yourself ❯

スライドショーの説明文（caption）

Trolltunga, Norway
Northern Lights, Norway
Beautiful Mountains
The Rain Forest
Mountains!
❮ ❯

w3-display-* クラス (topleft, topright, bottomleft, bottomright、middle)で、 各画像スライドに説明文（caption）を追加します：

例

<div class="w3-display-container mySlides">
  <img src="img_fjords.jpg" style="width:100%">
  <div class="w3-display-bottomleft w3-container w3-padding-16 w3-black">
    Trolltunga, Norway
  </div>
</div>
Try It Yourself ❯

スライドショー指示子

スライドショーのスライド枚数と、ユーザが現在見ているスライドの位置を示すのに、ボタンを使用した例です。

例

<div class="w3-center">
  <button class="w3-btn" onclick="plusDivs(-1)">&#10094; Prev</button>
  <button class="w3-btn" onclick="plusDivs(1)">Next &#10095;</button>

  <button class="w3-btn demo" onclick="currentDiv(1)">1</button>
  <button class="w3-btn demo" onclick="currentDiv(2)">2</button>
  <button class="w3-btn demo" onclick="currentDiv(3)">3</button>
</div>
Try It Yourself ❯

他の例：

❮
❯

例

<div class="w3-content w3-display-container">
  <img class="mySlides" src="img_nature.jpg">
  <img class="mySlides" src="img_fjords.jpg">
  <img class="mySlides" src="img_mountains.jpg">
  <div class="w3-center w3-display-bottomleft" style="width:100%">
    <div class="w3-left" onclick="plusDivs(-1)">&#10094;</div>
    <div class="w3-right" onclick="plusDivs(1)">&#10095;</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>
Try It Yourself ❯

インジケータとしての画像

インジケータに画像を使用している例です：

例

<div class="w3-content" style="max-width:1200px">
  <img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
  <img class="mySlides" src="img_fjords_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-border w3-hover-shadow"
      src="img_nature_wide.jpg" onclick="currentDiv(1)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-border w3-hover-shadow"
      src="img_fjords_wide.jpg" onclick="currentDiv(2)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-border w3-hover-shadow"
      src="img_mountains_wide.jpg" onclick="currentDiv(3)">
    </div>
  </div>
</div>
Try It Yourself ❯

アニメ付きスライド

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">
Try It Yourself ❯

フェード付きアニメ

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">
Try It Yourself ❯

❮ 前章へ 次章へ ❯