ミライ創造学舎

事業の最新情報の更新及び開発手法・おすすめのテクニックの紹介をさせて頂きます。

Bootstrapを活用しよう! 【Ⅲ. スライドショーの作成】

皆さん、お疲れ様です。

 

今後は3日以内の投稿を目指して、

頑張っていきますので今後とも本ブログを宜しくお願い致します。

            

 

では...

今回のBootstrapの活用方法を確認していきましょう!!





 

Bootstrap :  スライドショーの作成 

 

スライドショーと聞き、何をイメージされますか??

一般的には、画像を自動で切り替えて、スライド形式で画面に表示しているものになりますが、実は....HTML/CSS単体では実現できるものではなく、

通常はJavaScriptjQueryといったものの知識がないといけません....(;´д`)トホホ

 

 

 でも...安心してください!!

    Bootstrapではスライドショーの作成方法も準備されています。 

 

   ※  始める前に何でも大丈夫なので、画像を3枚準備してください。

 

【コード 例】

<解説>

class = "carousel slide"

:  スライドショーのような機能を作成するためのCSSが準備されている。

 

[ 画像に関する情報を格納する場所 ]

<div class="carousel-inner">

  ~ 画像の設定からの記述はすべてこの中に記入する~

</div>

 

[ 画像の設定 ]

※ class="slaは、位置を調整するために"独自に加えたCSSです。

<div class="carousel-item active">
  <!-- 一つ目の画像 -->
  <img src="DSC_0481.JPG" alt="First slide" class="sla">
  <!-- <div class="carousel-caption" style="top:50px">
  <h6>Caption of first slide</h6> = キャプションのつけかた -->
</div>
<div class="carousel-item">
  <!-- 二つ目の画像 -->
  <img src="test_image.JPG" alt="Second slide" class="sla">
</div>
<div class="carousel-item">
  <!-- 三つ目の画像 -->
  <img src="1517671523452.jpg" alt="Third slide" class="sla">
</div>

※ 画像の設定の際は、<div class="carousel-item"></div>の内部で定義すること。


  ちなみにキャプションとは、説明みたいなものです。

 

 

[ 前の画像に戻る機能 ]

※ 赤色の箇所が戻る機能に関係している。

f:id:Varth-Connect:20190830224628p:plain


<a class="carousel-control-prev"

   href="#example-2" role="button" data-slide="prev">

= 両者とも一つ目の画像に戻るために必要なCSSが定義されている。

  <span class="carousel-control-prev-icon" aria-hidden="true"></span>

= 「<」のアイコンを設定するCSSが定義されている。

  <span class="sr-only">Previous</span>
</a>

 

 

[ 後ろの画像に進む機能 ]

※ 赤色の箇所が戻る機能に関係している。

f:id:Varth-Connect:20190830224707p:plain



<a class="carousel-control-next"

  href="#example-2" role="button" data-slide="next">

= 両者とも次の画像へ進むために必要なCSSが定義されている。
  <span class="carousel-control-next-icon" aria-hidden="true"></span>

= 「>」というアイコンを設定するCSSが定義されている。
  <span class="sr-only">Next</span>
</a>

 

[ 中央下部に今どのコンテンツを表示しているかを表示 ]

f:id:Varth-Connect:20190830224802p:plain


<ol class="carousel-indicators">

= インジケータを作成するために定義 : carousel-indicators
<li data-target="#example-2" data-slide-to="0" class="active"></li>

= data-slide-to="0"は、1番目の画像を指す
<li data-target="#example-2" data-slide-to="1"></li>

= data-slide-to="1"は、2番目の画像を指す
<li data-target="#example-2" data-slide-to="2"></li>

= data-slide-to="2"は、3番目の画像を指す
</ol>

 

 


[ クロスフェード ]

※ 例では2秒ごとに次の画像を表示しています。

 

<div class="carousel slide carousel-fade" data-interval=2000 ~ >


= carousel-fadeクロスフェードを実現 

= 秒数の指定は、data-interval=ミリ秒で指定する。(2000ミリ秒 ≒ 2秒 )

 

 

 

【実行結果】


Bootstrap [スライドショー作成 : 例 ]

 
youtu.be


 

 

 

 以上で、今回の内容を終えていきたいと思います。

不明点や実行時のエラーなど起こった場合は、コメント欄から気軽にご相談ください!!

 

 

 

次回は、「モーダルの作成方法」をやっていこうと思います。

 

 

 

 

===========================================

↓↓ 以下のSNSでも情報の掲載などしております。

===========================================