Bootstrap4-carousel

提供：Dev Guides
移動先:案内、検索

ブートストラップ4-カルーセル

説明

カルーセルは、サイトにスライダーを追加するための柔軟で応答性の高い方法です。 カルーセルを作成するには、

  • .carousel_および.slide_クラスをIDとともにコンテナに追加します。
  • クラスを_.carousel-inner_で<div>のスライドを指定し、_。carousel-item_クラスで定義された各スライドを指定します。
  • _.active_クラスをスライドの1つに追加して、カルーセルを表示します。そうでない場合、カルーセルは表示されません。

基本的なカルーセル

以下の簡単なスライドショーは、インジケータとコントロールを備えた基本的なカルーセルを示しています-

例

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

      <!-- Bootstrap CSS -->
      <link rel = "stylesheet"
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin = "anonymous">

      <title>Bootstrap 4 Example</title>
   </head>

   <body>
      <div class = "container">
         <h2>Basic Carousel</h2>
         <div id = "carouselwithIndicators" class = "carousel slide w-50" data-ride = "carousel">
            <ol class = "carousel-indicators">
               <li data-target = "#carouselExampleIndicators" data-slide-to = "0" class = "active"></li>
               <li data-target = "#carouselExampleIndicators" data-slide-to = "1"></li>
               <li data-target = "#carouselExampleIndicators" data-slide-to = "2s"></li>
            </ol>

            <div class =" carousel-inner">
               <div class = "carousel-item active">
                  <img class = "d-block w-100"
                     src = "https://www.finddevguides.com/bootstrap/images/slide1.png"
                     alt = "First slide">
               </div>

               <div class = "carousel-item">
                  <img class = "d-block w-100"
                     src = "https://www.finddevguides.com/bootstrap/images/slide2.png"
                     alt = "Second slide">
               </div>
               <div class = "carousel-item">
                  <img class = "d-block w-100"
                     src = "https://www.finddevguides.com/bootstrap/images/slide3.png"
                     alt = "Third slide">
               </div>
            </div>

            <a class = "carousel-control-prev" href = "#carouselwithIndicators" role = "button" data-slide = "prev">
               <span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
               <span class = "sr-only">Previous</span>
            </a>

            <a class = "carousel-control-next" href = "#carouselwithIndicators" role = "button" data-slide = "next">
               <span class = "carousel-control-next-icon" aria-hidden = "true"></span>
               <span class = "sr-only">Next</span>
            </a>
         </div>
      </div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
         crossorigin = "anonymous">
      </script>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
         crossorigin = "anonymous">
      </script>

      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin = "anonymous">
      </script>

   </body>
</html>

それは次の結果を生成します-

出力

注-この例では、_w-50_をカルーセルに、_w-100_を画像に使用しました。これにより、_50％_の幅と、カルーセル画像の_auto_および_100％_の左右のマージンが提供されます。

スライドへのキャプション

.carousel-item_クラス内の.carousel-caption_クラスを使用して、スライドショーにキャプションを追加します。

次の例は、キャプションをスライドショーに追加する方法を示しています-

例

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

      <!-- Bootstrap CSS -->
      <link rel = "stylesheet"
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin = "anonymous">

      <title>Bootstrap 4 Example</title>
   </head>

   <body>
      <div class = "container">
         <h2>Carousel with Caption</h2>
         <div id = "carouselwithIndicators" class = "carousel slide w-50" data-ride = "carousel">
            <ol class = "carousel-indicators">
               <li data-target = "#carouselExampleIndicators" data-slide-to = "0" class = "active"></li>
               <li data-target = "#carouselExampleIndicators" data-slide-to = "1"></li>
               <li data-target = "#carouselExampleIndicators" data-slide-to = "2"></li>
            </ol>

            <div class = "carousel-inner">
               <div class = "carousel-item active">
                  <img class = "d-block w-100"
                     src = "https://www.finddevguides.com/bootstrap/images/slide1.png"
                     alt = "First slide">
                  <div class = "carousel-caption d-none d-md-block">
                     <h5>HTML</h5>
                     <p>Hypertext Markup Language</p>
                  </div>
               </div>

               <div class = "carousel-item">
                  <img class = "d-block w-100"
                     src = "https://www.finddevguides.com/bootstrap/images/slide2.png"
                     alt = "Second slide">
                  <div class = "carousel-caption d-none d-md-block">
                     <h5>CSS</h5>
                     <p>Cascading Style Sheets</p>
                  </div>
               </div>

               <div class = "carousel-item">
                  <img class = "d-block w-100"
                  src = "https://www.finddevguides.com/bootstrap/images/slide3.png"
                  alt = "Third slide">
                  <div class = "carousel-caption d-none d-md-block">
                     <h5>PHP</h5>
                     <p>Hypertext Preprocessor</p>
                  </div>
               </div>

            </div>

            <a class = "carousel-control-prev" href = "#carouselwithIndicators" role = "button" data-slide = "prev">
               <span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
               <span class = "sr-only">Previous</span>
            </a>

            <a class = "carousel-control-next" href = "#carouselwithIndicators" role =" button" data-slide = "next">
               <span class = "carousel-control-next-icon" aria-hidden = "true"></span>
               <span class = "sr-only">Next</span>
            </a>
         </div>
      </div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
         crossorigin = "anonymous">
      </script>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
         crossorigin = "anonymous">
      </script>

      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin = "anonymous">
      </script>

   </body>
</html>

それは次の結果を生成します-

出力

クロスフェード

以下の例に示すように、_。carousel-fade_クラスを使用して、カルーセルのスライドをアニメーション化するフェード遷移効果を追加できます-

例

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

      <!-- Bootstrap CSS -->
      <link rel = "stylesheet"
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin = "anonymous">

      <title>Bootstrap 4 Example</title>
   </head>

   <body>
      <div class = "container">
         <h2>Carousel with Crossfade</h2>
         <div id = "carouselExampleFade" class = "carousel carousel-fade w-50" data-ride = "carousel">
            <div class = "carousel-inner">
               <div class = "carousel-item active">
                  <img class = "d-block w-100"
                     src = "https://www.finddevguides.com/bootstrap/images/slide1.png"
                     alt = "First slide">
               </div>

               <div class = "carousel-item">
                  <img class = "d-block w-100"
                     src = "https://www.finddevguides.com/bootstrap/images/slide2.png"
                     alt = "Second slide">
               </div>

               <div class = "carousel-item">
                  <img class = "d-block w-100"
                     src = "https://www.finddevguides.com/bootstrap/images/slide3.png"
                     alt = "Third slide">
               </div>
            </div>

            <a class = "carousel-control-prev" href = "#carouselExampleFade" role = "button" data-slide = "prev">
               <span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
               <span class = "sr-only">Previous</span>
            </a>

            <a class = "carousel-control-next" href = "#carouselExampleFade" role = "button" data-slide = "next">
               <span class = "carousel-control-next-icon" aria-hidden = "true"></span>
               <span class = "sr-only">Next</span>
            </a>
         </div>
      </div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
         crossorigin = "anonymous">
      </script>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
         crossorigin = "anonymous">
      </script>

      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin = "anonymous">
      </script>

   </body>
</html>

それは次の結果を生成します-

出力

「https://www.finddevguides.com/index.php?title=Bootstrap4-carousel&oldid=7366」から取得
Powered by MediaWiki