• LINEで送る

スライドショーを作る

基本的なスライドショー

特に面倒なjsの設定などせずとも、基本的なスライダーは実装出来るようです。

但し、公式に説明があるように、アクセシビリティ標準に準拠していないので、プラットフォームによっては期待した動作をしない可能性があるので別なもん検討してねって事らしいです。 あと、IE8,9では動作しないとの事。これはBootstrap側が意図的にそうしたようで、jQueryベースのアニメーションではなくあくまでCSS3レベルの実装のようです。

MSがWindows10からIEブランドを破棄するような事を言っている時代ですしIE8,9は切り捨てても良いと思いますが、別なライブラリーを使うか自作した方が早そうですね。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<div class="mySlider1">
  <div id="mySlider1-target" class="carousel slide" data-ride="carousel">
     
  <!-- ページャー部分 -->
    <ol class="carousel-indicators">
      <li data-target="#mySlider1-target" data-slide-to="0"></li>
      <li data-target="#mySlider1-target" data-slide-to="1" class="active"></li>
      <li data-target="#mySlider1-target" data-slide-to="2"></li>
    </ol>
 
  <!-- 画像部分 -->
    <div class="carousel-inner" role="listbox">
      <div class="item">
        <img src="slide/01.jpg" title="Image01" alt="Image01">
          <div class="carousel-caption">
            <h4>Image 01</h4>
            <p>Example</p>
          </div>
      </div>
      <div class="item active">
        <img src="slide/02.jpg" title="Image02" alt="Image02">
          <div class="carousel-caption">
            <h4>Image 01</h4>
            <p>Example</p>
          </div>
      </div>
      <div class="item">
        <img src="slide/03.jpg" title="Image03" alt="Image03">
          <div class="carousel-caption">
            <h4>Image 01</h4>
            <p>Example</p>
          </div>
      </div>
    </div>
 
  <!-- 左右移動コントローラー部分 -->
    <a class="left carousel-control" href="#mySlider1-target" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#mySlider1-target" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
 
  </div>
</div>