Bootstrap カルーセル(スライドショー)


<div
 id="carousel-example-generic"
 class="carousel slide"
 data-ride="carousel"
 data-interval="3000">
 <!– ○●ボタン –>
 <ol class="carousel-indicators">
  <li data-target="#carousel-example-generic" data-slide-to="0"
   class="active"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 </ol>
 <!– スライドの内容 –>
 <div class="carousel-inner" role="listbox">
  <div class="item active">
   <img src=(画像1) width=~; height=~; />
  </div>
  <div class="item">
   <img src=(画像2) width=~; height=~; />
  </div>
  <div class="item">
   <img src=(画像3) width=~; height=~; />
  </div>
 </div>
 <!– 左右の移動ボタン –>
 <a class="left carousel-control"
  href="#carousel-example-generic" 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="#carousel-example-generic"
  role="button"
  data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"
   aria-hidden="true"></span>
  <span class="sr-only">Next</span>
 </a>
</div>

コメントを残す

メールアドレスが公開されることはありません。