途中からBootstrapを実装する記録 その2 スライダーを実装する。

Bootstrapでのスライダー実装

引き続きの記事なります。
早速このサイトのスライダーもBootstrapを利用したスライダーに変更してみます。公式にあるスライダーに既にありますので、実際に実装してみます。

早速実装

公式にあるソースコードを早速実装します。

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <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>

こちらをそのまま使い、コンテナで包みます。実際コードも書いてみます。

<!--BSスライダー枠ここまで-------------------------------------------------->
<div class="container-fluid">
	<div class="row">
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			<!-- Indicators -->
			<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>

			<!-- Wrapper for slides -->
			<div class="carousel-inner" role="listbox">

				<div class="item active">
					<a href="リンク先/">
	<img src="/images/top_slider01.png" class="center-block" alt="WordPress加速">
	<div class="carousel-caption">
	<h1>遅いWordPressを加速</h1>
    <p>サーバ構築とソースコードの修正サービス</p>
	</div>
	</a>
以下省略　－－
------------------------------------------------>

あとは下にマージも追加してみます。ここは判りやすく……

<div class="container-fluid top-slider-margin">

背景によって  <div class=”carousel-caption”>内の文字は見づらくなるので、こちらはまたCSSに追加します。
ここまで１０分もあれば実装できるので非常に楽ですね。