07.캐러셀(Carousel)

캐러셀(Carousel) – 이미지파일로 등록시

• 스타일

  <style>
   .carousel-inner > .item > img,
   .carousel-inner > .item > a > img {
   width: 100%;
   margin: auto;
   }
   </style>

• 코드

   <div class="container">
   <div id="myCarousel" class="carousel slide" data-ride="carousel">
   <!-- 이미지 아래 버튼 (필요없으시 삭제)-->
   <ol class="carousel-indicators">
   <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
   <li data-target="#myCarousel" data-slide-to="1"></li>
   <li data-target="#myCarousel" data-slide-to="2"></li>
   <li data-target="#myCarousel" data-slide-to="3"></li>
   </ol>
  
   <!-- 슬라이드 이미지들 -->
   <div class="carousel-inner" role="listbox">
   <div class="item active">
   <img src="http://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania">
   </div>
  
   <div class="item">
   <img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania">
   </div>
   
   <div class="item">
   <img src="http://www.w3schools.com/bootstrap/img_flower.jpg" alt="Flower">
   </div>
  
   <div class="item">
   <img src="http://www.w3schools.com/bootstrap/img_flower2.jpg" alt="Flower">
   </div>
   </div>
  
   <!-- 왼쪽 오른쪽 버튼 (필요없으시 삭제)-->
   <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
   <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
   </a>
   <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
   <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
   </a>
   </div>
  </div>