BootstrapとjQueryでスライドショーを作成する

初めに

Bootstrapのカルーセル機能と jQueryを使用してぬるっと動くスライドショーを作成しました。 今回udemyの有料講座を見てそれを若干いじって作成してます。 コードを全部のせるようなことはないのでわかりにくいと思います。

完成イメージ

以下イメージ図です。分かりにくくてすみません。 画面横幅いっぱいのスライドショーです。自動でスライドしていきます。

Bootstrapでスライドショー作成

以下のudemyの講座を参照し、作成しましたので詳しい説明はしません。
以下の講座はBootstrapがとてもよく理解できます！

<div class="carousel slide" data-ride="carousel" id="carousel">
 <div class="carousel-inner">

＃以下は下の棒を出す記述です
    <ol class="carousel-indicators">
        <li class="active" data-target="#carousel" data-slide-to="0"></li>
        <li  data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
        <li data-target="#carousel" data-slide-to="3"></li>
        <li data-target="#carousel" data-slide-to="4"></li>
      </ol>

＃以下が１枚目のスライドです。
  <div class="carousel-item carousel-image-1 active">
＃文字を入れる必要なければ以下は不要です。
   <div class="carousel-caption d-none d-md-block">
     <p class="title1 d-none d-lg-block">Welcome</p>
     <p class="introduction"><br>"書きたい文章あれば"</p>
   </div>
  </div>

＃１枚目と同様に２枚目のスライドについて記述します。
１枚目をactiveにしてるので、２枚はactiveは不要です。
activeにするとページ読んだ時に一番最初に表示されます。

省略

全体をcarousel slideで囲み、その中にcarousel-innnerクラスを作成します。
そしてその中に、carousel-itemと文字を入れたければ
carousel-captionを作成します。
d-noneの記述は画像が小さくなったら文字は表示しないという記述になります。

CSSの記述

こちらも割愛します。

homes.scss

.carousel-image-1 {
  background-image: image-url("lighthouse.jpg");
  background-size: cover;
  background-position:center;
  position: relative;
  width: 100%;
  height: 600px;
}

画像のimage-urlという記述は本番環境でも対応できるようにこのように書いています。
background-size: cover;画像の縦横比を崩すことなく、画像ができるだけ大きくなるよう配置。
background-position:center;真ん中が大事だから真ん中を基準に配置してもらう

動かす

今回はHTMLファイルに直接書きました。

<style>
  $(".carousel").carousel({
    /*２秒間隔*/
    interval: 2000,
    /*マウスが乗ったら止める*/
    /*pause: "hover",*/
  })
</style>

カルーセルクラスを取得し、
カルーセルメソッドを使用しています。

終わり

以下の講座は本当にわかりやすいのでおすすめです。