LoginSignup
1
0

More than 3 years have passed since last update.

react-bootstrapで簡単なスライドを表示させよう

Posted at

需要があるかわかりませんが記事を書く練習がてらに書きます。

スライドの表示

react-bootstrapでのスライドの表示は<Carousel></Carousel>内に書くことによって作れます。

まずはreturn内に以下のコードを書きました


<Carousel>
  <Carousel.Item>
    <img
      className="d-block w-100"
        src="holder.js/800x400?text=React&bg=373940"
        alt="First slide"
    />
    <Carousel.Caption>
      <h3>Reactを使用しました</h3>
      <p>ReactとはJavaScriptのライブラリです</p>
    </Carousel.Caption>
  </Carousel.Item>
</Carousel>

まず上から順に説明していくと、<Carousel.Item>で一枚のスライドを表示することができ、3枚スライドを用意したいなら3つ用意すれば良いわけです。

<img>で画像も使用できますが、このholder.jsというライブラリを使用することによって簡単に文字を入れたスライドを作ることが可能になります。

holder.jsは以下のコードで読み込みましょう。

index.html
<script src="//cdnjs.cloudflare.com/ajax/libs/holder/2.9.6/holder.js"></script>

<Carousel.Caption>の中は説明文を書くことができます。この中に説明したいことを記述しましょう。

以上です、練習がてらに書いたので説明不足と下手さは見逃してください。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0