セクションアウトライン

    • Tip: It’s best to give the carousel a max width in the code (eg. style="max-width: 760px"). The value should be equal or lower than the width of your image.


    • ソースを表示する 

      <div id="carousel-1" class="carousel slide" data-ride="carousel" style="max-width: 760px">
          <ol class="carousel-indicators">
              <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-1" data-slide-to="1"></li>
              <li data-target="#carousel-1" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner" role="listbox">
              <div class="carousel-item active">
                  <img class="d-block img-fluid" src="https://3rdwavemedia.com/demo-images/slides/maker-slide-1.jpg" alt="" />
              </div>
              <div class="carousel-item"><img class="d-block img-fluid" src="https://3rdwavemedia.com/demo-images/slides/maker-slide-2.jpg" alt="" /></div>
              <div class="carousel-item"><img class="d-block img-fluid" src="https://3rdwavemedia.com/demo-images/slides/maker-slide-3.jpg" alt="" /></div>
          </div>
          <a class="carousel-control-prev" href="#carousel-1" 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="#carousel-1" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
          </a>
      </div>